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

HTML                 

  
     


 


 
 
   
   
   
   
   
      
  
   
      
   
   
      
   
    
   
   
    
    李嘉诚400亿澳洲并购：千亿现金急寻出路
    美女
    自行车
    足球
   
 
 
 
 
 
 
 
 



 

      
     

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 -95px9;
 
}
.ShowEntry .carousel-btn-next {
 right: 15px;
 background-position: -160px -95px9;
}
.ShowEntry .icon-wrap {
 position: relative;
 display: block;
 margin: 10% 0 0 10%;
 width: 80%;
 height: 80%;

}
.player {
 position: relative;
}
.player .imgview {
 
 height: 300px;
 position: relative;
 overflow: hidden;
 background: #ccc;
}
.circles{
 position: absolute;
 bottom: 20px;
 right: 0;
 width: 80px;
 height: 8px;
}

.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").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);
 });

以上所述是小编给大家介绍的基于JS实现仿百度百家主页的轮播图效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！