这篇文章主要为大家详细介绍了原生 js 实现轮播图的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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>
来源: http://www.phperz.com/article/17/0604/327258.html