原生js实现轮播图
作者：wall1999
这篇文章主要为大家详细介绍了原生js实现轮播图的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。