全部用jquery写的无缝左右滑动轮播图

这里的圆点的html代码是通过js实现的,全jquery实现无缝轮播
1、html代码
  • 第1张图片
  • 第2张图片
  • 第3张图片
  • 第4张图片
  • 第5张图片
    • <
      >

      2、css代码
      div.banner{
      display:block;
      position: relative;
      margin:0 auto;
      width:1200px;
      height:535px;
      margin-top:30px;
      overflow: hidden;
      z-index: 1;
      }
      .imgs{
      position: absolute;
      top: 0;
      left: 0;
      }
      .des{
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: -2;
      background: #ccc;
      }
      .des li{
      float: left;
      width: 1200px;
      }
      .imgs li{
      float: left;
      }
      .nums{
      position: absolute;
      bottom: 10px;width: 100%;
      text-align: center;
      font-size: 0;
      }
      .nums 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;
      }
      .btns{
      display: none;
      }
      .btns 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;
      }
      .btns .prev{
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -50px;
      }
      .btns .next{
      position: absolute;
      right: 0;
      top: 50%;
      margin-top: -50px;
      }
      .nums .active{
      background-color: #fff;
      }
      .hide{
      display: none;
      }

      3、全部jquery-js代码

      $(function(){
      var i=0;
      var timer=null;
      for (var j = 0; j < $('.imgs li').length; j++) { //创建圆点
      $('.nums').append('
    • ')
      }
      $('.nums li').first().addClass('active'); //给第一个圆点添加样式
      var firstimg=$('.imgs li').first().clone(); //复制第一张图片
      $('.imgs').append(firstimg).width($('.imgs li').length*($('.imgs img').width()));
      //第一张图片放到最后一张图片后,设置ul的宽度为图片张数*图片宽度
      $('.des').width($('.imgs li').length*($('.imgs img').width()));
      // 下一个按钮
      $('.next').click(function(){
      i++;
      if (i==$('.imgs li').length) {
      i=1; //这里不是i=0
      $('.imgs').css({left:0}); //保证无缝轮播,设置left值
      };
      $('.imgs').stop().animate({left:-i*1200},300);
      if (i==$('.imgs li').length-1) { //设置小圆点指示
      $('.nums li').eq(0).addClass('active').siblings().removeClass('active');
      $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
      }else{
      $('.nums li').eq(i).addClass('active').siblings().removeClass('active');
      $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
      }
      })
      // 上一个按钮
      $('.prev').click(function(){
      i--;
      if (i==-1) {
      i=$('.imgs li').length-2;
      $('.imgs').css({left:-($('.imgs li').length-1)*1200});
      }
      $('.imgs').stop().animate({left:-i*1200},300);
      $('.nums li').eq(i).addClass('active').siblings().removeClass('active');
      $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
      })
      //设置按钮的显示和隐藏
      $('.banner').hover(function(){
      $('.btns').show();
      },function(){
      $('.btns').hide();
      })
      //鼠标划入圆点
      $('.nums li').mouseover(function(){
      var _index=$(this).index();
      $('.imgs').stop().animate({left:-_index*1200},300);
      $('.nums li').eq(_index).addClass('active').siblings().removeClass('active');
      $('.des li').eq(_index).removeClass('hide').siblings().addClass('hide');
      })
      //定时器自动播放
      timer=setInterval(function(){
      i++;
      if (i==$('.imgs li').length) {
      i=1;
      $('.imgs').css({left:0});
      };
      $('.imgs').stop().animate({left:-i*1200},300);
      if (i==$('.img li').length-1) {
      $('.nums li').eq(0).addClass('active').siblings().removeClass('active');
      $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
      }else{
      $('.nums li').eq(i).addClass('active').siblings().removeClass('active');
      $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
      }
      },3000)
      //鼠标移入,暂停自动播放,移出,开始自动播放
      $('.banner').hover(function(){
      clearInterval(timer);
      },function(){
      timer=setInterval(function(){
      i++;
      if (i==$('.imgs li').length) {
      i=1;
      $('.imgs').css({left:0});
      };
      $('.imgs').stop().animate({left:-i*1200},300);
      if (i==$('.img li').length-1) {
      $('.nums li').eq(0).addClass('active').siblings().removeClass('active');
      $('.des li').eq(0).removeClass('hide').siblings().addClass('hide');
      }else{
      $('.nums li').eq(i).addClass('active').siblings().removeClass('active');
      $('.des li').eq(i).removeClass('hide').siblings().addClass('hide');
      }
      },3000)
      })
      })

      你可能感兴趣的:(代码操作梦工厂)