<html lang="en">
<head>
<meta charset="UTF-8">
<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: 750px;
height: 600px;
border: 1px solid black;
margin: 50px auto;
position: relative;
}
#box1 {
width: 750px;
height: 600px;
position: absolute;
/* 溢出隐藏 */
overflow: hidden;
}
#box1 #list {
width: 500%;
position: absolute;
top: 0;
left: 0;
}
#box1 #list li {
width: 750px;
height: 600px;
float: left;
}
#circle_list {
width: 300px;
height: 20px;
border-radius: 10%;
/* 透明 */
background-color: rgb(0, 0, 0, 0.3);
position: absolute;
margin-top: 550px;
margin-left: 240px;
}
.circle {
float: left;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: white;
margin-top: 2px;
margin-left: 35px;
/* position: absolute; */
cursor: pointer;
}
.button {
width: 750px;
height: 350px;
position: absolute;
top: 50%;
margin-top: -35px;
z-index: 3;
}
.btn {
width: 50px;
height: 70px;
background: rgba(0, 0, 0, 0.5);
color: white;
font-size: 36px;
text-align: center;
line-height: 70px;
}
.fr {
float: right;
}
.fl {
float: left;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<div class="box">
<div id="box1">
<ul id="list">
<li><img src="images/pic6.jpg" alt="" width="900px" height="600px"></li>
<li><img src="images/pic2.jpg" alt="" width="900px" height="600px"></li>
<li><img src="images/pic3.jpg" alt="" width="900px" height="600px"></li>
<li><img src="images/pic4.jpg" alt="" width="900px" height="600px"></li>
<li><img src="images/pic5.jpg" alt="" width="900px" height="600px"></li>
</ul>
</div>
<div id="circle_list">
<span class="circle active"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
<div class="button">
<div class="btn fl" id="left"><</div>
<div class="btn fr" id="right">></div>
</div>
</div>
<script>
var list = document.getElementById('list');
var circles = document.getElementsByClassName('circle');
//自执行函数 鼠标移动 小圆点事件
// for (var i = 0; i < circles.length; i++) {
// (function(i) {
// circles[i].onmouseover = function() {
// for (var j = 0; j < circles.length; j++) {
// circles[j].className = "circle";
// }
// this.className = "circle active";
// var target = i * -750;
// moveAnimate1(list, target); //是个函数 不加等号
// }
// })(i);
// }
for (var i = 0; i < circles.length; i++) {
(function(i) {
// circles[i].onmouseover = function() {//鼠标移动事件
circles[i].onclick = function() { //点击事件
// 排他
for (var j = 0; j < circles.length; j++) {
circles[j].className = "circle";
}
// 使当前触发的小圆点变色
this.className = "circle active";
// 设置移动距离
var target = i * -750;
moveAnimate1(list, target);
}
})(i);
};
// 封装自动播放的方法 设置变量
function autoplay() {
// 作为轮播到当前的图片的位置
var flag = 1;
setInterval(function() {
// 回归初识
flag = flag > circles.length - 1 ? 0 : flag;
// 排他
for (var j = 0; j < circles.length; j++) {
circles[j].className = "circle";
}
// 使当前触发的小圆点变色
circles[flag].className = "circle active";
// 设置移动距离
var target = flag * -750;
moveAnimate1(list, target);
flag++;
}, 2000)
}
autoplay();
function moveAnimate1(ele, target) {
clearInterval(ele.interId);
ele.interId = setInterval(function() {
if (ele.offsetLeft == target) {
clearIntervar(ele.interId);
} else {
var step = (target - ele.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
ele.style.left = ele.offsetLeft + step + 'px';
}
}, 10);
}
//目标最大值
function moveAnimate2(ele, target) {
clearInterval(ele.interId);
ele.interId = setInterval(function() {
if (ele.offsetLeft == target) {
clearInterval(ele.interId);
} else if (ele.setInterval < target) {
var step = (ele.offsetLeft + 13) > target ? target : ele.offsetLeft + 13;
//向左走
ele.style.left = step + 'px';
} else if (ele.setInterval > target) {
var step = (ele.offsetLeft - 13) > target ? target : ele.offsetLeft - 13;
//向右走
ele.style.left = step + 'px';
}
}, 50);
}
mouse.onmouseover = function() {
//鼠标移上去的事件（停止自动轮播）
clearInterval(moveEle);
}
mouse.onmouseover = function() { //鼠标移开事件（恢复自动轮播）
move = setInterval(function() {
autoplay("left")
}, 1000);
}
left.onclick = function() { //左边按钮事件；
autoplay("left");
}
right.onclick = function() { //右边按钮事件；
autoplay("right");
}
</script>
</body>
</html>
