原生js实现轮播图
更新时间：2017年02月27日 14:04:41 作者：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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
运算符（operator）也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号,这篇文章主要给大家介绍了关于js中不常见的运算符与操作符的相关资料,需要的朋友可以参考下2021-06-06
一个网页打印相关功能的扩展演示特效，在实现了打印功能外，还实现了打印预览、打印前的页眉页脚设置，直接打印等功能，以前对JS打印前设置页脚见的不多，所以这一个也算是挺有价值的，希望闲暇时参阅2013-05-05
这篇文章主要介绍了JS折半插入排序算法,以完整实例形式较为详细的分析了JavaScript实现折半插入排序的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
Three.js如何用轨迹球插件（trackball）增加对模型的交互功能详解
这篇文章主要给大家介绍了关于Three.js如何用轨迹球插件，也就是trackball增加对模型的交互功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起看看吧。2017-09-09
这篇文章主要为大家详细介绍了微信小程序支付前端源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台，这篇文章主要介绍了uni-app的基本使用,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了js input输入百分号保存数据库失败的解决方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了javascript感应鼠标图片透明度显示的方法,涉及javascript针对鼠标事件及图片透明度操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
本文为大家介绍下使用javascript实现简单的Map，可以对map进行获取、判断、删除、增加等等，感兴趣的朋友可以了解下2013-12-12
这篇文章主要为大家详细介绍了js实现随机点名程序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
最新评论