基于JS实现仿百度百家主页的轮播图效果

.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;

}

varindex=0;

//周期：2秒 auto_play后不能加括号

varcirculate=setInterval(auto_play,2000);//函数后面不能加括号

//自动播放

functionauto_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);

}

//切换图片

 functionchangePic(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的序号？

  varnum=$(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;

  elseindex=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;

  elseindex=index+1;

  changePic(index);

  circulate=setInterval(auto_play,2000);

 });