溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS左右無縫輪播功能。分享給大家供大家參考，具體如下：
其中對上一頁下一頁按鈕設置visibility屬性是為了解決輪播中點擊上一頁下一頁導致的bug，應為是a標簽所以用了visibility屬性，如果是按鈕button可以直接設置在輪播過程中按鈕不可點擊，當然其他解決方法都可以，以實際為準
代碼如下：換換圖片就可以直接用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>www.jb51.net JS左右無縫輪播</title>
<style>
* {margin:0;padding:0;}
#scrollImg{width:1000px;margin:100px auto;}
#prev{float:left;line-height:250px;}
#next{float:right;line-height:250px;}
#div1 {width:800px;height:250px;margin:0px auto;position:relative;overflow:hidden;}
#div1 ul {position:absolute;left:0;top:0;}
#div1 ul li {float:left;list-style:none;width:200px;height:250px;}
#div1 ul li img{width:100%;height:100%;}
</style>
</head>
<body>
<div id="scrollImg">
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="prev">向左</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" id="next">向右</a>
<div id="div1">
<ul>
<li><img src="image/0.jpeg" /></li>
<li><img src="image/1.JPEG" /></li>
<li><img src="image/3.jpg" /></li>
<li><img src="image/4.jpeg" /></li>
</ul>
</div>
</div>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
var oUl=document.getElementsByTagName("ul")[0];
var oLi=document.getElementsByTagName("li");
var index=0;
var timer;//定時器
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;//將輪播內容復制一份
oUl.style.width=oLi[0].offsetWidth*oLi.length+"px";
//移動速度
var speed=-10;
//控制滾動的方向
var prev=document.getElementById("prev");
var next=document.getElementById("next");
//上一頁
prev.onclick=function(){
if(index==4){
index=1;
oUl.style.left="0px";
}else{
index++;
speed=10;
}
move();
};
//下一頁
next.onclick=function(){
if(index==0){
index=3;
oUl.style.left=-oUl.offsetWidth/2+"px";
}else{
index--;
speed=-10;
}
move();
};
function move(){
timer=setInterval(function () {
oUl.style.left=oUl.offsetLeft-speed+"px";
var stop=-index*oLi[0].offsetWidth+"px";
prev.style.visibility="hidden";
next.style.visibility="hidden";
if(oUl.style.left==stop){
clearInterval(timer);
prev.style.visibility="visible";
next.style.visibility="visible";
}
},20);
}
}
</script>
</body>
</html>
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
