<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 601px;
height: 314px;
margin: 150px 30%;
padding: 5px;
border: 1px solid blue;
}
.inner {
width: 601px;
height: 314px;
overflow: hidden;
position: relative;
}
.inner ul {
list-style: none;
width: 1000%;
/*使得ul更宽,后面li能浮动到一行上*/
position: absolute;
top: 0;
left: 0;
}
img {
vertical-align: top;
}
li {
float: left;
}
</style>
</head>
<body>
<!-- 使li在一行上,ul是li父元素,ul多余的部分被隐藏
实现左右轮播效果,需移动ul,即向左移动一个图片的长度,
-->
<!-- 左右无缝自动轮播效果,原是6张图片,我们最后加1张第一张图片,一共7张图片
当到最后一张图片时,由于第七张图片和第一张相同,所以我们直接跳到第一张 -->
<div class="box" id="box">
<div class="inner" id="inner">
<!--相框-->
<ul>
<!-- 每张图片都可被点击跳转到网页,所以有a标签 -->
<li id="li1"><a href="#"><img src="images/1.png" alt=""></a></li>
<li><a href="#"><img src="images/2.png" alt=""></a></li>
<li><a href="#"><img src="images/3.png" alt=""></a></li>
<li><a href="#"><img src="images/4.png" alt=""></a></li>
<li><a href="#"><img src="images/5.png" alt=""></a></li>
<li><a href="#"><img src="images/6.png" alt=""></a></li>
<li><a href="#"><img src="images/1.png" alt=""></a></li>
</ul>
</div>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
//获取最外面的div
var box = my$("box");
//获取相框inner
var inner = box.children[0];
//获取inner相框的宽度,和照片宽度相等,因为inner的宽度就是内容的宽度,不包括内边距和边框
var imgWidth = inner.offsetWidth;
//获取ul
var ulObj = inner.children[0];
var timer = null;
//鼠标进入消除定时器,停止自动轮播
box.onmouseover = function () {
if(timer) clearInterval(timer);
}
//鼠标离开,开启定时器,自动轮播
var index = 1;
box.onmouseout = function () {
//无缝效果
timer = setInterval(function () {
if (index < ulObj.children.length) {
animate(ulObj, -index * imgWidth); //函数在下面
index++;
} else {
index = 1;
ulObj.style.left = 0;
}
}, 1000);
}
//保证打开页面后,不用离开box,也能自动轮播
box.onmouseout();
//封装动画函数 设置任意的一个元素,移动到指定的目标位置
function animate(element, target) { //target 是目标位置,即元素的left值
//先清理定时器
clearInterval(element.timeId);
//每隔20ms移动一段距离,直到目标位置
//element.timeId设置元素的属性了,不能用var timeId,因为每点一次按钮就会产生一个定时器,叠加后div移动的就快了,不是20ms了
element.timeId = setInterval(function () {
//获取div的当前位置
//如果样式的代码在style标签即<style>里设置的,不能用my$("dv").style.left获取
//而是用my$("dv").offsetLeft获取。
//若样式的代码在style属性即style="left:10px"里设置的,my$("dv").style.left和my$("dv").offsetLeft都可获取
var current = element.offsetLeft; //数字类型,没有px
//div每次移动多少像素 即步数
var step = 9;
//正负,负是当前大于目标,往左走
step = current < target ? step : -step;
//每次移动后的位置
current += step;
if (Math.abs(target - current) > Math.abs(step)) { //Math.abs()绝对值
//每次移动到的位置
element.style.left = current + "px";
} else {
clearInterval(element.timeId);
//已经接近目标,直接等于目标,不用再慢慢移动
element.style.left = target + "px";
}
}, 10);
}
</script>
</body>
</html>