JS实现自动轮播图效果(自适应屏幕宽度+手机触屏

1、本文使用js+jQuery实现轮播图，需要引用html' target='_blank'>jquery包，另种实现分别是animate实现自适应的轮播，以及transform平滑轮播（在注释代码中）。

2、代码中的图片大家自己更换就可以了，样式和逻辑均写在js里。

3、html标签代码，js代码

 p >

 script type= text/javascript  $(document).ready(function() { var len = $( .slider li ).length-1; //给slider设置样式 $( .slider ).css({ width : 100% , height : inherit , overflow : hidden , display : inline-block  //给ul设置宽度 $( .slides ).css({ position : relative , width :((len+1)*100).toString()+ % , margin : 0 , padding : 0 }); //给li设置百分比宽度 $( .slides li ).css({ width :(100/(len+1)).toString()+ % , float : left  //给图片设置宽度 $( .responsive ).css({ width : 100% , height : inherit  //控制点样式 $( .slider p ).css({ position : absolute , z-index : 999 , cursor : pointer  $( .slider .lastpic ).css({ left : 0 , margin-top : 7%  $( .slider .nextpic ).css({ right : 0 , margin-top : 7%  //animate移动 var i = 0; $( .nextpic ).click(function(){ moveNext(i); $( .lastpic ).click(function(){ moveLast(i); //自动轮播 var timer = setInterval(function(){ moveNext(i); },5000); moveNext = function(n){ if(n==len){ i=-1; $( .slider .slides ).animate({right: },800); }else{ $( .slider .slides ).animate({right:((n+1)*100).toString()+ % }, 800); i++; moveLast = function(n){ if(n==0){ i=len+1; $( .slider .slides ).animate({right:(len*100).toString()+ % }, 800); }else{ $( .slider .slides ).animate({right:((n-1)*100).toString()+ % }, 800); i--; //手机触摸效果 var startX,endX,moveX; function touchStart(event){ var touch = event.touches[0]; startX = touch.pageX; function touchMove(event){ var touch = event.touches[0]; endX = touch.pageX; function touchEnd(event){ moveX = startX - endX; if(moveX 50){ moveNext(i); }else if(moveX -50){ moveLast(i); document.getElementById( slides ).addEventListener( touchstart ,touchStart,false); document.getElementById( slides ).addEventListener( touchmove ,touchMove,false); document.getElementById( slides ).addEventListener( touchend ,touchEnd,false); //transition移动固定宽度，无法自适应 // $( .nextpic ).click(function(){ // if(i==len){ // i=-1; // $( .slider .slides ).css({ // transition-timing-function : linear , // transition-duration : 800ms , // transform : translateX(0px)  // }) // }else{ // $( .slider .slides ).css({ // transition-timing-function : linear , // transition-duration : 800ms , // transform : translateX(- +(i+1)*width+ px)  // }) // } // i++; // }); // $( .lastpic ).click(function(){ // if(i==0){ // i=len+1; // $( .slider .slides ).css({ // transition-timing-function : linear , // transition-duration : 800ms , // transform : translateX(- +len*width+ px)  // }) // }else{ // $( .slider .slides ).css({ // transition-timing-function : linear , // transition-duration : 800ms , // transform : translateX(- +(i-1)*width+ px)  // }) // } // i--; // }) /script 

以上所述是小编给大家介绍的JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
以上就是JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)_javascript技巧的详细内容，html教程        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。