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教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。