原生js实现轮播图

前端之家收集整理的这篇文章主要介绍了原生js实现轮播图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了js轮播图的具体实现代码,供大家参考,具体内容如下

CSS:

* { 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,.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,.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; 

}

html:

Box">
Box">
    1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

js:

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) 

}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/js/41276.html

猜你在找的JavaScript相关文章