需求:1.鼠标不在图片上方时,进行自动轮播,并且左右箭头不会显示;
当鼠标放在图片上方时,停止轮播,并且左右箭头会显示;
2.图片切换之后,图片中下方的小圆点会同时进行切换,并且点击
相应的小圆点可以切换到相应的图片上;
3.点击左右箭头可以进行左右图片的切换;
4.图片上需有介绍的文字,会随图片切换一起进行切换
原理:获取属性li是一个数组的形式,通过定时器,以修改定位的方式来实现轮播,最后一张图结束的时候进行判定重新回到第一张图的定位。
通过鼠标事件,如果鼠标在上面,会清除定时器,并且会将本来隐藏的箭头显示成块
给小圆点与箭头绑定点击事件。首先是小圆点,先设置自定义属性给与每一个原点index,在调用的时候就获取他的index,通过循环对每一个小圆点进行操作。如果点击的话就通过计算来获取本应该的定位,并且点击的时候给予class=active的选择器使其有被选中的样式
因为绑定了index 以及每一个选中的时候都有class的样式所以可以获取到有class的元素并获取到他的此时的index 将其作为数组的值,
以此来计算此时图片应该的距离以及此时应该是哪一个按钮为active
<!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>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#box {
width: 400px;
height: 300px;
overflow: hidden;
position: relative;
top: 300px;
left: 800px
}
img {
width: 400px;
height: 300px;
}
#imglist {
height: 300px;
width: 2000px;
}
#imglist li {
float: left;
position: relative;
}
.bottom {
position: relative;
top: -74px;
left: 155px;
}
.bottom li {
width: 15px;
height: 15px;
border-radius: 50%;
border: 2px solid white;
float: left;
margin-left: 5px;
}
.bottom .active {
background-color: white;
}
#imglist li p {
position: absolute;
top: 50px;
left: 200px;
color: white;
}
#left {
position: absolute;
background-color: white;
color: black;
top: 109px;
left: 0px;
width: 30px;
height: 40px;
line-height: 40px;
text-align: center;
display: none;
}
#right {
position: absolute;
background-color: white;
color: black;
top: 109px;
right: 0px;
width: 30px;
height: 40px;
line-height: 40px;
text-align: center;
display: none;
}
</style>
<body>
<div id="box">
<ul id="imglist">
<li><img src="./veer-414413576.jpg">
<p>介绍1111111111111</p>
</li> <!-- 1 -->
<li><img src="./veer-417239373.jpg">
<p>介绍2222222222222</p>
</li>
<li><img src="./veer-427466377.jpg">
<p>介绍3333333333333</p>
</li>
<li><img src="./veer-429334234.jpg">
<p>介绍4444444444444</p>
</li>
<li><img src="./veer-414413576.jpg">
<p>介绍1111111111111</p>
</li> <!-- 1 -->
</ul>
<div id="left">
< </div>
<div id="right">> </div>
<ul class="bottom">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
<span></span>
</div>
<script>
var left = 0
var timer
var lefter = document.getElementById("left")
var righter = document.getElementById("right")
var index
var xuhao
var arr = []
run()
box.onmouseover = function () {
clearInterval(timer)
lefter.style.display = "block"
righter.style.display = "block"
}
box.onmouseout = function () {
run()
lefter.style.display = "none"
righter.style.display = "none"
}
lefter.onclick = function () {
var xuwei = document.querySelector(".active")
var xuhao = xuwei.dataset.index
var dianji = document.querySelectorAll(".bottom li")
if (xuhao != 0) {
dianji[xuhao].classList.remove("active")
dianji[xuhao - 1].classList.add("active")
imglist.style.marginLeft = (xuhao - 1) * (-400) + 'px'
}
if (xuhao == 0) {
dianji[xuhao].classList.remove("active")
dianji[3].classList.add("active")
imglist.style.marginLeft = -1200 + 'px'
}
}
righter.onclick = function () {
var xuwei = document.querySelector(".active")
var xuhao = xuwei.dataset.index
var dianji = document.querySelectorAll(".bottom li")
console.log(xuhao)
if (xuhao == 0) {
dianji[0].classList.remove("active")
dianji[1].classList.add("active")
imglist.style.marginLeft = (1) * (-400) + 'px'
}
if (xuhao == 1) {
dianji[1].classList.remove("active")
dianji[2].classList.add("active")
imglist.style.marginLeft = (2) * (-400) + 'px'
}
if (xuhao == 2) {
dianji[2].classList.remove("active")
dianji[3].classList.add("active")
imglist.style.marginLeft = (3) * (-400) + 'px'
}
if (xuhao == 3) {
dianji[xuhao].classList.remove("active")
dianji[0].classList.add("active")
imglist.style.marginLeft = 0 + 'px'
}
}
function run() {
timer = setInterval(function () {
imglist.style.marginLeft = left + 'px'
left = left - 400
on = left / (-400) - 1
dianji[on].classList.add("active")
if (on <= 3 && on != 0) { dianji[on - 1].classList.remove("active"); }
if (on == 0) { dianji[3].classList.remove("active") }
if (left <= -1600) {
left = 0
}
}, 1500)
}
var dianji = document.querySelectorAll(".bottom li")
for (var i = 0; i < dianji.length; i++) {
dianji[i].dataset.index = i
dianji[i].onclick = function () {
var index = this.dataset.index
for (m = 0; m < dianji.length; m++) {
dianji[m].classList.remove("active")
}
dianji[index].classList.add("active")
imglist.style.marginLeft = index * (-400) + 'px '
}
}
</script>
</body>
</html>