溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、本文使用js+jQuery實現輪播圖，需要引用jquery包，另種實現分別是animate實現自適應的輪播，以及transform平滑輪播（在注釋代碼中）。
2、代碼中的圖片大家自己更換就可以了，樣式和邏輯均寫在js里。
3、html標簽代碼，js代碼
<div class="slider"> //輪播箭頭 <p class="lastpic"><img src="../images/prev.png"></p> <p class="nextpic"><img src="../images/next.png"></p> //輪播圖片 <ul id="slides" class="slides clearfix"> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暫無圖片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暫無圖片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暫無圖片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暫無圖片"></li> </ul> </div>
<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實現自動輪播圖效果(自適應屏幕寬度+手機觸屏滑動)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
