仿百度百家主页的轮播图效果

HTML

<p class="ShowEntry"> 
<!-- <p id="widget_content_player" class="Player" alog-group="log-player">-->
        <!--------- 右击箭头--------->
        <a href="javascript：void(0);" id="widget_content_player_prev" class="prev carousel-btn-prev">
            <span class="icon-wrap"><img src="image/箭头左.png"></span>
        </a>
 
        <p id="widget_content_player_wrapper" class="player">
            <!---------- 一张大图和涂上的文字  ------->
            <p id="widget_content_player_imgView" class="imgview">
 
                  <!---------- 一张大图  ------->
                 <a href="" target="_blank" mon="a=12&amp;col=1&amp;pn=2">
                    <img src="/uploadfile/2017/0306/20170306093517618.jpg" hadcut="1" class="active">
 
                 </a>
 
                 <a href="" target="_blank" mon="a=12&amp;col=1&amp;pn=2">
 
                  <img src="image/95eef01f3a292df570506750b5315c6035a873e0.jpg">          
                </a>
 
                 <a href="" target="_blank" mon="a=12&amp;col=1&amp;pn=2">
                    <img src="image/0824ab18972bd407e8f01db872899e510fb30944.jpg.png">          
                 </a>
 
                  <a href="" target="_blank" mon="a=12&amp;col=1&amp;pn=2">
                    <img src="image/9825bc315c6034a8cfd58fc7c213495409237644.jpg">          
                 </a>
 
                 <!--<p class="readnum"><span class="tit">阅读数</span><span class="num" data-read="16913">16913</span></p>-->                                                         
                 <!---------- 图片下方的解释文字，由js控制 哪张图对应哪个链接 ------->
                 <p class="box">
                     <i class="mark"></i>
                     <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title">李嘉诚400亿澳洲并购：千亿现金急寻出路</a>
                     <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title">美女</a>
                     <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title">自行车</a>
                     <a href="http://mbcaijing.baijia.baidu.com/article/755645" target="_blank" class="title">足球</a>
                 </p>
 
            </p>
 
            <!---------- 右下方四个点  ------->
            <p class="circles">
            <a href="http://guoshiliangbo.baijia.baidu.com/article/756806" class="circle" target="_blank"></a>
            <a href="http://yemacaijing.baijia.baidu.com/article/755797" class="circle" target="_blank"></a>
            <a href="http://mbcaijing.baijia.baidu.com/article/755645" class="circle " target="_blank"></a>
            <a href="http://junstapo.baijia.baidu.com/article/755717" class="circle " target="_blank" ></a>
            </p>
 
        </p>
 
       <!--------- 右击箭头--------->
        <a href="javascript：void(0);" id="widget_content_player_next" class="next carousel-btn-next">
            <span class="icon-wrap"><img src="image/右箭头.png"</span>
        </a>
 
   <!-- </p>-->
 
</p>

CSS

.ShowEntry{
    height:inherit;
    width:70%;
    background:#00F;
    margin-right:10px;
    float:left;
    position:relative;
}
.ShowEntry .carousel-btn-prev, .ShowEntry .carousel-btn-next {
    position: absolute;
    top: 130px;
    width: 50px;
    height: 50px;
    z-index: 89;    
}
 
.addBgi{
    background-image:url(../image/%E5%9C%86.png);
    background-repeat: no-repeat;
}
 
.ShowEntry .carousel-btn-prev {
    left: 15px;
    background-position: -10px -95px\9;
    /*background-image:url(../image/%E5%B7%A6%E7%AE%AD%E5%A4%B4.png)*/
}
 
.ShowEntry .carousel-btn-next {
    right: 15px;
    background-position: -160px -95px\9;
}
.ShowEntry .icon-wrap {
    position: relative;
    display: block;
    margin: 10% 0 0 10%;
    width: 80%;
    height: 80%;
/*  z-index:99;*/
}
 
.player {
    position: relative;
}
 
.player .imgview {
    /*width: 670px;*/
    height: 300px;
    position: relative;
    overflow: hidden;
    background: #ccc;
}
 
.circles{
    position: absolute;
    bottom: 20px;
    right: 0;
    width: 80px;
    height: 8px;
 
}
/*.player .circles .active*/
.active {
    background: red;
    opacity: 1;/*????????*/
}
 
.player .circles .circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background:#000;
    margin-left: 2px;
    opacity: .7;
}
 
.box{
    height:80px;
    width:100%;
    position:absolute;
    bottom:0;
}
 
.box .title {
    font-size: 18px;
    line-height: 70px;
    color: #fff;
    font-family: "??????","Hiragino Sans GB";
    display: block;
    text-align:center;
}
 
.box .title:hover {
    text-decoration: none;
    color: #e05a5a;
}

javascript

var index=0;
//周期：2秒  auto_play后不能加括号
var circulate=setInterval(auto_play,2000);//函数后面不能加括号
//自动播放
function auto_play(){
    //alert(index);
    if(index>=3)
    {index=0;}
    else {index=index+1;}
 
    changePic(index);
    /*$(".imgview img").css("display","none");*/
    //$(".imgview img").attr("src",imgs[index]);
    //alert(index);
}
//切换图片
    function changePic(index){
        //alert(index);
        $(".imgview a").css("display","none");
        $(".box a").css("display","none");
        $(".circles a").css("background","#000");
 
        //var src=$(".imgview a:eq("+index+")").attr("target");
        //alert(src);
        $(".imgview a:eq("+index+")").css("display","inline");
        $(".box a:eq("+index+")").css("display","block");
        $(".circles a:eq("+index+")").css("background","red");
        //alert(src);
    }
//鼠标进入播放区域 暂停播放
    $(".imgview").mouseenter(function(){
        //alert("hi!");
        clearInterval(circulate);
    })
    //鼠标移出播放区域 开始播放
    $(".imgview").mouseleave(function(){
        //alert("hi!");
        circulate=setInterval(auto_play,2000);
    })
 
    //鼠标移入序号圆点 切换到序号所对应图
    $(".circle").mouseenter(function(){
        //如何确定当前circle的序号？
        var num=$(this).index();
        //alert(num);
        clearInterval(circulate);
 
        changePic(num);
 
        circulate=setInterval(auto_play,2000);
    });
//点击左边箭头 切换到上一张
    $(".carousel-btn-prev").click(function(){
        clearInterval(circulate);
        //alert(index);
        //1.现在处在第几张 ：index;
        if(index==0)index=3;
        else index=index-1;
        changePic(index);
        circulate=setInterval(auto_play,2000);
    });
 
    //点击右边箭头 切换到下一张
    $(".carousel-btn-next").click(function(){
        clearInterval(circulate);
        //alert(index);
        //1.现在处在第几张 ：index;
        if(index==3)index=0;
        else index=index+1;
        changePic(index);
        circulate=setInterval(auto_play,2000);
    });