溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了js輪播圖的具體實現代碼，供大家參考，具體內容如下
CSS：
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif;
}
body {
background: #eee;
}
#Bigbox {
width: 720px;
height: 420px;
border: 1px solid #333;
margin: 60px auto;
}
#Box {
width: 700px;
height: 400px;
position: relative;
overflow: hidden;
top: 10px;
left: 10px;
}
#Ul {
height: 400px;
position: absolute;
top: 0;
left: 0;
}
#Ul li {
width: 700px;
height: 400px;
float: left;
}
#Left {
width: 60px;
height: 50px;
border-radius: 30%;
background: rgba(96, 96, 96, .5);
position: absolute;
top: 50%;
left: 0;
margin-top: -25px;
color: #fff;
line-height: 50px;
text-align: center;
cursor: pointer;
font-size: 20px;
display: none;
}
#Right {
width: 60px;
height: 50px;
border-radius: 30%;
background: rgba(96, 96, 96, .5);
position: absolute;
top: 50%;
right: 0;
margin-top: -25px;
color: #fff;
line-height: 50px;
text-align: center;
cursor: pointer;
font-size: 20px;
display: none;
}
</style>
html：
<div id="Bigbox">
<div id="Box">
<ul id="Ul">
<li>
1<img src="img/1.jpg" width="100%" height="100%">
</li>
<li>
2<img src="img/2.jpg" width="100%" height="100%">
</li>
<li>
3<img src="img/3.jpg" width="100%" height="100%">
</li>
<li>
4<img src="img/4.jpg" width="100%" height="100%">
</li>
<li>
5<img src="img/5.jpg" width="100%" height="100%">
</li>
<li>
6<img src="img/6.jpg" width="100%" height="100%">
</li>
<li>
7<img src="img/7.jpg" width="100%" height="100%">
</li>
<li>
8<img src="img/8.jpg" width="100%" height="100%">
</li>
<li>
9<img src="img/9.jpg" width="100%" height="100%">
</li>
<li>
10<img src="img/10.jpg" width="100%" height="100%">
</li>
</ul>
<div id="Left" onselectstart="return false">左</div>
<div id="Right" onselectstart="return false">右</div>
</div>
</div>
js：
<script>
window.onload = function() {
var n = 0;
var timer = null;
var timer1 = null;
var timer2 = null;
var timer3 = null;
var oDiv = document.getElementById('Box')
var oUl = document.getElementById('Ul')
var oLi = oUl.getElementsByTagName('li')
//獲取div寬度
var oDivWidth = getStyle(oDiv, 'width').split('px')[0] //復制oUl的innerHTML
oUl.innerHTML += oUl.innerHTML
//設置ul寬度
oUl.style.width = oLi.length * oDivWidth + 'px'
//獲取ul寬度
var oUlWidth = getStyle(oUl, 'width').split('px')[0] //封裝獲取非行間樣式函數
function getStyle(obj, sName) {
if (obj.currentStyle) {
return obj.currentStyle[sName];
} else {
return getComputedStyle(obj, false)[sName];
}
}
//執行函數
clearInterval(timer3)
timer3 = setInterval(function() {
Run()
}, 2000)
//封裝運動函數
function Run() {
clearInterval(timer)
timer = setInterval(function() {
n -= 20;
oUl.style.left = n + 'px'
if (n % oDivWidth == 0) {
clearInterval(timer3)
clearInterval(timer)
clearInterval(timer1)
timer1 = setTimeout(function() {
Run()
}, 2000)
}
if (n <= -oUlWidth / 2) {
oUl.style.left = 0;
n = 0;
clearInterval(timer3)
clearInterval(timer)
clearInterval(timer1)
timer1 = setTimeout(function() {
Run()
}, 2000)
}
}, 30)
}
//鼠標移入停止滾動
oDiv.onmouseover = function() {
Left.style.display = 'block'
Right.style.display = 'block'
clearInterval(timer3)
clearInterval(timer2)
timer2 = setInterval(function() {
if (n % oDivWidth == 0) {
clearInterval(timer)
clearInterval(timer1)
}
}, 30)
}
//鼠標移出繼續執行
oDiv.onmouseout = function() {
Left.style.display = 'none'
Right.style.display = 'none'
clearInterval(timer3)
clearInterval(timer2)
clearInterval(timer1)
timer1 = setTimeout(function() {
Run()
}, 2000)
}
//向左
Left.onclick = function() {
//清除所有定時器
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
timer = setInterval(function() {
n -= 50;
oUl.style.left = n + 'px'
if (n % oDivWidth == 0) {
clearInterval(timer)
}
if (n <= -oUlWidth / 2) {
oUl.style.left = 0;
n = 0;
}
}, 30)
}
//向右
Right.onclick = function() {
clearInterval(timer)
clearInterval(timer1)
clearInterval(timer2)
clearInterval(timer3)
if (n == 0) {
n = -oUlWidth / 2
}
clearInterval(timer)
timer = setInterval(function() {
n += 50;
oUl.style.left = n + 'px'
if (n % oDivWidth == 0) {
clearInterval(timer)
}
}, 30)
}
}
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
