轮播图js 怎么使最后的鼠标移动事件和点击事件生效呢

saunter through life 2020-08-19 01:15:07

<!DOCTYPE html>
<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>

...全文