移动端的图片轮播

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <style type="text/css">
       *{margin: 0;padding: 0;}
       .container{width: 100%;position: relative;overflow: hidden;}
       .innercontainer{
           position: relative;
           width: 800%;
           left: 0;
           right: 0;
       }
       .wraperimg{
           width: 500px;
           float: left;
       }
       .pagination{
           position: absolute;
           bottom: 10px;
           width: 100%;
           text-align: center;
       }
       .pagination span{
           display: inline-block;
           width: 5px;
           height: 5px;
           background: salmon;
           line-height: 5px;
           border-radius: 100%;
           margin-right: 5px;
       }
       .pagination .active{
           background: aqua;
           color: white;
       }
       img{
           width: 100%;
       }
   </style>
   <body>
       <div class="container">
           <div class="innercontainer">
               <div class="wraperimg">
                   <img src="img/1106628.jpg"/>
               </div>
               <div class="wraperimg">
                   <img src="img/1106914.jpg"/>
               </div>
               <div class="wraperimg">
                   <img src="img/1111588.jpg"/>
               </div>
               <div class="wraperimg">
                   <img src="img/1113230.jpg"/>
               </div>
               <div class="wraperimg">
                   <img src="img/1154570.jpg"/>
               </div>
               <div class="wraperimg">
                   <img src="img/1106628.jpg"/>
               </div>
           </div>
           <div class="pagination">
               
           </div>
       </div>
   </body>
   <script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript">
       //屏幕宽度
       var viewWidth = $(window).width();
       $('.wraperimg').css('width',viewWidth);
       //插入小店
       var imglenght = $('img').length;
       var newspan;
       for(var i=0;i<imglenght-1;i++){
           if(i==0){
               newspan = $('<span class="active"></span>');
               $('.pagination').append(newspan);
           }else{
               newspan = $('<span></span>');
               $('.pagination').append(newspan);
           }
       }
       //移动端
       var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
       }
       if(browser.versions.mobile||browser.versions.android||browser.versions.ios){
           $('body').on('touchstart','.container',function(e){
               var touch = e.originalEvent;
               var startX = touch.changedTouches[0].pageX;
               $('.container').on('touchmove',function(e){
                   e.preventDefault();
                   touch = e.originalEvent.touches[0]||e.originalEvent.changedtouches[0];
                   if(touch.pageX-startX>10){
                       $('.container').off('touchmove');
                       flag = false;
                        clearInterval(timer);
                        if (_index == 0) {
                            _index = innercontainerGroup.length - 1;
                            $(".innercontainer").css("left", -(innercontainerGroup.length - 1) * imgWidth);
                        }
                        _index--;
                        selectPic(_index);
                   }else if(touch.pageX-startX<-10){
                       $('.container').off('touchmove');
                       flag = false;
                       clearInterval(timer);
                        _index++;
                        selectPic(_index);
                   }
               })
               return false;
//               alert(touch)
           }).on('touchend',function(){
               $('.container').off('touchmove');
               timer = setInterval(go, 3000);
           });
       }
       //轮播
       var innercontainerGroup = $('.wraperimg');
       var spanGroup = $('.pagination span');
       var imgWidth = $('.wraperimg img:first-child').eq(0).width();
       var _index = 0;
       var timer = null;
       var flag = true;
       function autogo(bol){
           if(bol){
               timer = setInterval(go,3000);
           }
       }
       autogo(flag);
       function go(){
           _index++;
           selectPic(_index);
       }
       function selectPic(num){
           $('.pagination span').eq(num).addClass('active').siblings().removeClass('active');
           $('.innercontainer').animate({
               left:-num*imgWidth,
           },1000,function(){
               if(_index == innercontainerGroup.length-1){
                   _index=0;
                   $('.innercontainer').css('left','0px');
                   $('.pagination span').eq(0).addClass('active').siblings().removeClass('active');
               }
           })
       }

   </script>

</html>

移动端的图片轮播

猜你喜欢