我吃了炫迈做出来的轮播图,停不下来的那种
一、结构
<div class="box" id="screen">
<ul>
<li><img src="http://img.mp.itc.cn/upload/20161107/033dc0a68d084597a0c53d4028fc0cc6.jpeg" alt=""/></li>
<li><img src="http://img.mp.itc.cn/upload/20161107/848040a29b204269a3b051505c17a59e.jpeg" alt=""/></li>
<li><img src="http://img.mp.itc.cn/upload/20161107/cec0ebec6056473da336530c8b28b65e.jpeg" alt=""/></li>
<!--放置了一个假的第一张,为了制作无缝滚动效果-->
<li><img src="http://img.mp.itc.cn/upload/20161107/033dc0a68d084597a0c53d4028fc0cc6.jpeg" alt=""/></li>
</ul>
</div>
二、样式
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
vertical-align: top;
}
/*取消图片底部3像素距离*/
.box {
width: 300px;
height: 200px;
margin: 100px auto;
background-color: pink;
position: relative;
overflow: hidden;
}
.box ul li {
float: left;
}
.box ul {
width: 1500px;
position: absolute;
left: 0;
top: 0;
}
</style>
三、行为
<script>
//1 获取元素
var screen = document.getElementById("screen");//可视区域
var imgWidth = screen.offsetWidth;//图片宽度
var list = screen.children[0];//要运动的ul
var lisLen = list.children.length;//获取li的个数
//2.2 设置步长
var step = -10;
//2 书写一个简单运动代码
setInterval(function () {
//2.1 获取元素当前位置
var current = list.offsetLeft;
//2.4 设置需要抽回的条件(当假的第一张显示完全时设置抽回操作)
if (current > -(lisLen - 1) * imgWidth) {
//2.3 计算新的步长,再设置给left属性即可
current = current + step;
list.style.left = current + "px";
} else {
//设置抽回操作,为了看起来没有卡顿,可以抽回到一个step的距离(设置left值为step)
list.style.left = step + "px";
}
}, 40);
//3 鼠标移入,让运动速度减慢
screen.onmouseover = function () {
step = -2;
};
//4 鼠标移出,将速度还原
screen.onmouseout = function () {
step = -10;
};
</script>