jqueryで左右シームレスなカルーセルを実現-jsチュートリアル-php.cn

jqueryで左右シームレスなカルーセルを実現

WBOY

リリース： 2016-05-16 15:01:37

オリジナル

2031 人が閲覧しました

この記事の例では、参考のために jquery シームレスカルーセルチャートの実装コードを共有します。具体的な内容は次のとおりです。

 <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="#"><img src="img/2.jpg" alt="第2张图片"></a></li>
    <li><a href="#"><img src="img/3.jpg" alt="第3张图片"></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>

ログイン後にコピー

以上がこの記事の全内容です。皆さんが Jquery プログラミングを学ぶのに役立つことを願っています。