<!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;
}
ul,
li {
list-style: none;
}
#box {
width: 600px;
height: 400px;
overflow: hidden;
border: 10px solid #ccc;
margin: 50px auto;
position: relative;
}
#box ul {
width: 10000px;
height: 400px;
left: 0;
top: 0;
position: absolute;
}
#box ul li {
width: 600px;
height: 400px;
float: left;
}
#box ul li img {
width: 100%;
height: 100%;
}
#box p {
width: 100%;
height: 20px;
position: absolute;
left: 0;
bottom: 20px;
text-align: center;
}
#box p span {
display: inline-block;
width: 20px;
height: 20px;
background-color: #333;
border-radius: 50%;
cursor: pointer;
}
#box p span.active {
background-color: red;
}
#box .left,
#box .right {
position: absolute;
width: 45px;
height: 100px;
top: 150px;
background: url('img/sprite.png') no-repeat;
}
#box .left {
left: 0;
}
#box .right {
right: 0;
background-position: -45px 0;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="img/t1.png" alt=""></li>
<li><img src="img/t2.png" alt=""></li>
<li><img src="img/t3.png" alt=""></li>
</ul>
<a href="javascript:;" class="left"></a>
<a href="javascript:;" class="right"></a>
<p>
<span class="active"></span>
<span></span>
<span></span>
</p>
</div>
<script src="js/move.js"></script>
<script>
var box = document.getElementById('box');
var ul = document.querySelector('ul');
var li = ul.querySelectorAll('li');
var left = box.querySelector('.left');
var right = box.querySelector('.right');
var span = box.querySelectorAll('span');
// console.log(box,ul,li,left,right,span);
// 无缝轮播：将第一张图赋值一份，添加到最后
ul.appendChild(li[0].cloneNode(true));
var imgW = li[0].clientWidth; // 一张图的宽度
// 给ul设置宽度，一张图的宽度乘以图片数量，图片数量=li的长度
ul.style.width = imgW * (li.length + 1) + 'px';
var count = 0; // 当前展示的是下标为0的这张图
var timer = null; // 设置定时器为空
// 实现步骤：
// 先设置定时器，2秒执行一次，通过count++的改变，使用move(change)函数，改变ul的left值，如果count大于li的长度-1，则立即把count的值改为0，重新回到第一张图
// 一打开就执行定时器
timer = setInterval(auto, 2000);
// 划上box停止定时器
box.onmouseover = function () {
clearInterval(timer);
}
// 划离box重新开启
box.onmouseout = function () {
timer = setInterval(auto, 2000);
}
// right下一张
right.onclick = auto;
// left上一张
left.onclick = function () {
if (count <= 0) {
count = li.length;
ul.style.left = -imgW * count +'px';
}
count--;
change();
}
// 划上分页小按钮
for (var i = 0; i < span.length; i++) {
// 给span第i个自定义index属性并赋值i
span[i].index = i;
span[i].onmouseover = function () {
count = this.index;
change();
}
}
function auto() {
// 无缝轮播的关键是，先判断，再加加
// 如果count等于li的长度，也就是最后一张图的时候，count赋值为0，并且立即改变ul的left值为0，就会回到第一张图的位置
if (count >= li.length) {
count = 0;
ul.style.left = 0;
}
count++;
change();
}
function change() {
move(ul, { left: -imgW * count });
// 图片轮播，改变span的className，count就是第span[i]个
for (var i = 0; i < span.length; i++) {
// 先把span的className清空
span[i].className = '';
}
// 判断count，在给span赋值
if (count >= li.length) {
span[0].className = 'active';
} else {
span[count].className = 'active';
}
}
</script>
</body>
</html>
function getStyle(ele, attr) {
if (window.getComputedStyle) {
// 标准浏览器
return getComputedStyle(ele)[attr];
} else {
// IE8及以下
return ele.currentStyle[attr];
}
}
// 元素 属性 目标 回调
function move(ele, json, callback) {
clearInterval(ele.timer); // 先清
// 再开
ele.timer = setInterval(function () {
var onOff = true; // 建一个开关
// 在for-in的里面，如果某一个属性没有到，则把开关变为假
for (var attr in json) { // 删掉的attr和target又回来了
var target = json[attr];
// 当前位置
if (attr === 'opacity') {
var now = getStyle(ele, 'opacity') * 100;
} else {
var now = parseInt(getStyle(ele, attr));
}
var dir = (target - now) / 10; // 方向 缓冲运动
// 如果大于0，向上取整，否则向下取整
dir = dir > 0 ? Math.ceil(dir) : Math.floor(dir);
now += dir; // 下次应该运动到的位置
if ((now >= target && dir > 0) || (now <= target) && dir < 0) {
now = target;
}
// 设置值
if (attr === 'opacity') {
ele.style.opacity = now / 100;
ele.style.filter = 'alpha(opacity=' + now + ')';
} else {
ele.style[attr] = now + 'px';
}
if (now !== target) {
onOff = false;
}
}
if (onOff) { // 如果开关是真的，则清定时器并执行回调
clearInterval(ele.timer);
callback && callback();
}
}, 30);
}