jquery实现左右无缝轮播图

最新推荐文章于 2019-08-31 14:38:38 发布

GMY20

最新推荐文章于 2019-08-31 14:38:38 发布

阅读量203

点赞数 1

分类专栏：脚本编程

本文链接：https://blog.csdn.net/TCS1164/article/details/51376457

版权

脚本编程专栏收录该内容

56 篇文章 0 订阅

订阅专栏

 
  <title>无缝轮播图</title> 
 
  <style> 
 
  *{margin: 0;padding:0; } 
 
  ul{list-style: none;} 
 
  .banner{width: 600px;height: 300px;border: 2px solid 
  #ccc;margin: 100px auto;position: relative;overflow: hidden;} 
 
  .img{position: absolute;top: 0;left: 0} 
 
  .img li{float: left;} 
 
  .num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;} 
 
  .num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;} 
 
  .btn{display: none;} 
 
  .btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: 
  #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;} 
 
  .btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;} 
 
  .btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;} 
 
  .num .active{background-color: 
  #fff;} 
 
  </style> 
 
  <script src= 
  "http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" 
  ></script> 
 
  </head> 
 
  <body> 
 
  <div class= 
  "banner" 
  > 
 
  <ul class= 
  "img" 
  > 
 
  <li><a href= 
  "#" 
  ><img src= 
  "img/1.jpg" 
  alt= 
  "第1张图片" 
  ></a></li> 
 
  <li><a href= 
  "http://www.hkvenus.net/" 
  ><img src= 
  "img/2.jpg" 
  alt= 
  "第2张图片" 
  >http://www.hkvenus.net/</a></li> 
 
  <li><a href= 
  "http://www.tgb001.com/" 
  ><img src= 
  "img/3.jpg" 
  alt= 
  "第3张图片" 
  >http://www.tgb001.com/</a></li> 
 
  <li><a href= 
  "#" 
  ><img src= 
  "img/4.jpg" 
  alt= 
  "第4张图片" 
  ></a></li> 
 
  <li><a href= 
  "#" 
  ><img src= 
  "img/5.jpg" 
  alt= 
  "第5张图片" 
  ></a></li> 
 
  </ul> 
 
  <ul class= 
  "num" 
  ></ul>  
  // 
 
  <div class= 
  "btn" 
  > 
 
  <span class= 
  "prev" 
  ><</span> 
 
  <span class= 
  "next" 
  >></span> 
 
  </div> 
 
  </div> 
 
  <script> 
 
  $( 
  function 
  (){ 
 
  var 
  i=0; 
 
  var 
  timer= 
  null 
  ; 
 
  for 
  ( 
  var 
   j = 0; j < $( 
  '.img li' 
  ).length; j++) {  
  //创建圆点 
 
  $( 
  '.num' 
  ).append( 
  '<li></li>' 
  ) 
 
  } 
 
  $( 
  '.num li' 
  ).first().addClass( 
  'active' 
  );  
  //给第一个圆点添加样式 
 
  var 
  firstimg=$( 
  '.img li' 
  ).first().clone();  
  //复制第一张图片 
 
  $( 
  '.img' 
  ).append(firstimg).width($( 
  '.img li' 
  ).length*($( 
  '.img img' 
  ).width()));  
  //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度 
 
  // 下一个按钮 
 
  $( 
  '.next' 
  ).click( 
  function 
  (){ 
 
  i++; 
 
  if 
  (i==$( 
  '.img li' 
  ).length) { 
 
  i=1;  
  //这里不是i=0 
 
  $( 
  '.img' 
  ).css({left:0});  
  //保证无缝轮播，设置left值 
 
  }; 
 
  $( 
  '.img' 
  ).stop().animate({left:-i*600},300); 
 
  if 
  (i==$( 
  '.img li' 
  ).length-1) {  
  //设置小圆点指示 
 
  $( 
  '.num li' 
  ).eq(0).addClass( 
  'active' 
  ).siblings().removeClass( 
  'active' 
  ); 
 
  } 
  else 
  { 
 
  $( 
  '.num li' 
  ).eq(i).addClass( 
  'active' 
  ).siblings().removeClass( 
  'active' 
  ); 
 
  } 
 
  }) 
 
  // 上一个按钮 
 
  $( 
  '.prev' 
  ).click( 
  function 
  (){ 
 
  i--; 
 
  if 
  (i==-1) { 
 
  i=$( 
  '.img li' 
  ).length-2; 
 
  $( 
  '.img' 
  ).css({left:-($( 
  '.img li' 
  ).length-1)*600}); 
 
  } 
 
  $( 
  '.img' 
  ).stop().animate({left:-i*600},300); 
 
  $( 
  '.num li' 
  ).eq(i).addClass( 
  'active' 
  ).siblings().removeClass( 
  'active' 
  ); 
 
  }) 
 
  //设置按钮的显示和隐藏 
 
  $( 
  '.banner' 
  ).hover( 
  function 
  (){ 
 
  $( 
  '.btn' 
  ).show(); 
 
  }, 
  function 
  (){ 
 
  $( 
  '.btn' 
  ).hide(); 
 
  }) 
 
  //鼠标划入圆点 
 
  $( 
  '.num li' 
  ).mouseover( 
  function 
  (){ 
 
  var 
  _index=$( 
  this 
  ).index(); 
 
  $( 
  '.img' 
  ).stop().animate({left:-_index*600},150); 
 
  $( 
  '.num li' 
  ).eq(_index).addClass( 
  'active' 
  ).siblings().removeClass( 
  'active' 
  ); 
 
  }) 
 
  //定时器自动播放 
 
  timer=setInterval( 
  function 
  (){ 
 
  i++; 
 
  if 
  (i==$( 
  '.img li' 
  ).length) { 
 
  i=1; 
 
  $( 
  '.img' 
  ).css({left:0}); 
 
  }; 
 
  $( 
  '.img' 
  ).stop().animate({left:-i*600},300); 
 
  if 
  (i==$( 
  '.img li' 
  ).length-1) {  
 
  $( 
  '.num li' 
  ).eq(0).addClass( 
  'active' 
  ).siblings().removeClass( 
  'active' 
  ); 
 
  } 
  else 
  { 
 
  $( 
  '.num li' 
  ).eq(i).addClass( 
  'active' 
  ).siblings().removeClass( 
  'active' 
  ); 
 
  } 
 
  },1000) 
 
  //鼠标移入，暂停自动播放，移出，开始自动播放 
 
  $( 
  '.banner' 
  ).hover( 
  function 
  (){  
 
  clearInterval(timer); 
 
  }, 
  function 
  (){ 
 
  timer=setInterval( 
  function 
  (){ 
 
  i++; 
 
  if 
  (i==$( 
  '.img li' 
  ).length) { 
 
  i=1; 
 
  $( 
  '.img' 
  ).css({left:0}); 
 
  }; 
 
  $( 
  '.img' 
  ).stop().animate({left:-i*600},300); 
 
  if 
  (i==$( 
  '.img li' 
  ).length-1) {  
 
  $( 
  '.num li' 
  ).eq(0).addClass( 
  'active' 
  ).siblings().removeClass( 
  'active' 
  ); 
 
  } 
  else 
  { 
 
  $( 
  '.num li' 
  ).eq(i).addClass( 
  'active' 
  ).siblings().removeClass( 
  'active' 
  ); 
 
  } 
 
  },1000) 
 
  }) 
 
  }) 
 
</script>

GMY20

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现左右无缝轮播图

无缝轮播图*{margin: 0;padding:0; }ul{list-style: none;}.banner{width: 600px;height: 300px;border: 2px solid#ccc;margin: 100px auto;position: relative;overflow: hidden;}.img{position: absolute;t
复制链接

扫一扫

专栏目录