jquery 移动端无缝轮播_Jquery教程

导读：jquery 移动端无缝轮播

jquery 移动端无缝轮播

<!DOCTYPE html>

<html>

        <head>

                <meta charset="UTF-8">

                <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

                <title>无缝轮播图</title>

                  <style>

                    *{margin: 0;padding:0; }

                    ul{list-style: none;}

                    .banner{width:100vw;height: 55vw;position: relative;overflow: hidden;}

                    .img{position: absolute;top: 0;left: 0}

                    .img li{float: left;width:100vw; height:55vw}

                    .img li img{

                            width:100vw;

                            height:55vw;

                    }

                    .num{position: absolute;bottom: 10px;width: 100vw;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;}

                    .num .active{background-color: #fff;}

                  </style>

                  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

        </head>

        <body>

            <div class="banner">

                          <ul class="img">

                          </ul>

                          <ul class="num"></ul>

                          <div class="btn">

                            <span class="prev"><</span>

                            <span class="next">></span>

                          </div>

                </div>

        </body>

                <script>

                  $(function(){

                    var i=0;

                    var timer=null;

                    var str='';

                    for (var k= 0; k < 5; k++) {  //创建图片

                       str+="<li><a href='###'><img src='img/5.jpg' alt='第5张图片'></a></li>"

                    }

                    console.log(str)

                     $('.img').append(str);

                    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的宽度为图片张数*图片宽度

           //判断左右滑动切换

                        $('.img').on("touchstart", function(e) {

//                            e.preventDefault();

                            startX = e.originalEvent.changedTouches[0].pageX;

//                            e.stopPropagation();

                return false;

                        });

                        $('.img').on("touchend", function(e) {

//                            e.preventDefault();

//                            e.stopPropagation();

                            moveEndX = e.originalEvent.changedTouches[0].pageX,

                            X = moveEndX - startX,

                            console.log(X)

                            if ( X > 0 ) {

                                  clearInterval(timer);

                              i--;

                              if (i==-1) {

                                i=$('.img li').length-2;

                                $('.img').css({left:-($('.img li').length-1)*$('.img img').width()});

                              }

                              $('.img').stop().animate({left:-i*$('.img img').width()},300);

                              $('.num li').eq(i).addClass('active').siblings().removeClass('active');

                            }

                            else if ( X < 0 ) {

                                  clearInterval(timer);

                              i++;

                              if (i==$('.img li').length) {

                                i=1; //这里不是i=0

                                $('.img').css({left:0}); //保证无缝轮播，设置left值

                              };



                              $('.img').stop().animate({left:-i*$('.img img').width()},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');

                              }

                            }

                            return false;

                        });

                    //定时器自动播放

                    timer=setInterval(function(){

                      i++;

                      if (i==$('.img li').length) {

                        i=1;

                        $('.img').css({left:0});

                      };



                      $('.img').stop().animate({left:-i*$('.img img').width()},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');

                      }

                    },1500)

                  })

                </script>

</html>

全站搜索

jquery 移动端无缝轮播

最新推荐

本周排行