原生JS实现图片跑马灯特效
今天给大家分享一个用原生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>
