| 今天给大家分享一个用原生JS实现的图片跑马灯特效，效果如下： 
实现的代码如下，欢迎大家复制粘贴。 <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现图片跑马灯特效</title> <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } img { border: none; } body { background: #eee; } .slide-module { width: 120px; height: 400px; margin: 0 auto; background: #fff; border: 1px solid #ccc; position: relative; top: 50px; } .slide-module .up { width: 27px; height: 27px; /* 向上的箭头 */ background: url(images/0.gif) no-repeat; position: absolute; top: 4px; left: 50%; margin-left: -16px; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; } .slide-module .down { width: 27px; height: 27px; /* 向下的箭头 */ background: url(images/5.gif) no-repeat; position: absolute; bottom: 4px; left: 50%; margin-left: -16px; cursor: pointer; filter: alpha(opacity=60); opacity: 0.6; } .slide-module .wrap { width: 120px; height: 330px; position: absolute; top: 35px; left: 0; overflow: hidden; } .slide-module ul { width: 120px; position: absolute; top: 0; left: 0; } .slide-module li { width: 120px; height: 110px; float: left; } .slide-module a { display: block; width: 100px; height: 100px; border: 1px solid red; margin: 0 auto; position: relative; top: 4px; } .slide-module a:hover { border: 1px solid #333; } .slide-module .active { border: 10px solid #000; } </style> <script type="text/javascript"> window.onload = function () { miaovSlide('miaovSlide'); }; function miaovSlide(o) { //获取操作对象容器 var obj = document.getElementById(o); if (!obj) return; //获取对象下面所有的div var aDiv = obj.getElementsByTagName('div'); //获取向上箭头 var oUp = getClass('up'); //获取向下箭头 var oDown = getClass('down'); //获取图片容器 var oWrap = getClass('wrap'); //获取图片列表 var oUl = oWrap.getElementsByTagName('ul')[0]; //获取图片列表项 var oLi = oUl.getElementsByTagName('li'); var oTime = null; var iMs = 30; var i = 0; var iNum = 5; var toggle = -1; oUl.innerHTML += oUl.innerHTML; // 点击向上时，向上走 oUp.onclick = function () { toggle = -1; autoPlay(toggle); }; // 点击向下时，向走走 oDown.onclick = function () { toggle = 1; autoPlay(toggle); }; // 向上与向下箭头鼠标移入时，修改其透明度为1 oUp.onmouseover = oDown.onmouseover = function () { this.style.filter = 'alpha(opacity:100)'; this.style.opacity = 1; }; // 向上与向下箭头鼠标移入时，修改其透明度为0.6 oUp.onmouseout = oDown.onmouseout = function () { this.style.filter = 'alpha(opacity:60)'; this.style.opacity = 0.6; }; // 图片运动方法,toggle代表向下或是向上的值 function autoPlay(toggle) { // 清除原有定时器 if (oTime) { clearInterval(oTime); } // 重新开启定时器 oTime = setInterval(function () { // 第次增量 iNum += 2 * toggle; // UL向下走,当top值大于0时 if (iNum > 0) { // 设定top值为负的UL高度的一半(向上拉) iNum = -oLi.length * oLi[0].offsetHeight / 2; } // UL向上走，当top值的绝对值大于UL自身宽度的一半时 if (Math.abs(iNum) > oLi.length * oLi[0].offsetHeight / 2) { // 设定top的值为0(向下拉) iNum = 0; } // 赋值给top值 oUl.style.top = iNum + 'px'; }, iMs); }; autoPlay(toggle); // 获取拥有当前样式的元素 function getClass(sName) { for (i = 0; i < aDiv.length; i++) { if (aDiv[i].className == sName) { return aDiv[i]; } } } } </script></head> <body> <div class="slide-module" id="miaovSlide"> <!-- 向上箭头 --> <div class="up"></div> <div class="wrap"> <ul> <li> <a> <img src="images/1.jpg" /> </a> </li> <li> <a> <img src="images/2.jpg" /> </a> </li> <li> <a> <img src="images/3.jpg" /> </a> </li> <li> <a> <img src="images/4.jpg" /> </a> </li> </ul> </div> <!-- 向下箭头 --> <div class="down"></div> </div> </body> </html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
原生JS实现百叶窗特效
vue中混入mixins的使用方法 |
