<!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;
list-style: none;
}
#box {
width: 800px;
height: 400px;
margin: 0 auto;
position: relative;
border: 4px solid #000;
overflow: hidden;
}
ul {
width: calc(6 * 800px);
height: 400px;
position: relative;
display: flex;
left: 0;
transition: left 0.3s linear;
}
ul>li {
width: 800px;
height: 400px;
}
img{
width: 100%;
height: 100%;
}
span {
padding: 8px 5px 7px;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: calc(50% - 16px);
color: #fff;
opacity: 0;
transition: opacity 0.3s;
}
#box:hover span{
opacity: 1;
}
.left{
left: 0;
}
.right{
right: 0;
}
.list{
position: absolute;
left: 250px;
bottom: 30px;
width: 100px;
height: 20px;
z-index: 10000;
}
.itme{
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin-left: 10px;
}
.itme1{
background-color: black;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="./img/1.jpg" alt=""></li>
<li><img src="./img/2.jpg" alt=""></li>
<li><img src="./img/3.jpg" alt=""></li>
<li><img src="./img/4.jpg" alt=""></li>
<li><img src="./img/5.jpg" alt=""></li>
<li><img src="./img/6.jpg" alt=""></li>
</ul>
<div class="list">
<div class="itme itme1"></div>
<div class="itme"></div>
<div class="itme"></div>
<div class="itme"></div>
</div>
<span class="left">上</span><span class="right">下</span>
</div>
<script>
// 自动轮播
var i = 0; //记录显示li的索引
var ul = document.querySelector("ul");
var li = document.querySelectorAll("li"); //[li0,li1,li2,li3,li4]
var box = document.querySelector("#box");
var span1 = document.querySelector("#box .left");
var span2 = document.querySelector("#box .right");
var list1=document.querySelector(".list")
var itme1=document.querySelectorAll(".list>.itme")
function item() {
li = document.querySelectorAll("li");
ul.style.transitionDuration = "0.3s";
ul.style.left = "-800px";
itme1[i].style="background:#fff"
setTimeout(function(){
ul.appendChild(li[0]);
ul.style.transitionDuration = "0s";
ul.style.left = "0px";
itme1[a].style="background:black"
},300)
}
var time = setInterval(item,2000);
box.onmouseenter = function(){
clearInterval(time);
}
box.onmouseleave = function(){
time = setInterval(item,2000);
}
span2.onclick = function(){ item() }
span1.onclick = function(){
li = document.querySelectorAll("li");
// 1.让最后一个li移动到ul内前面
var max = li.length - 1;
ul.insertBefore(li[max],li[0]);
// 2.为了出现在box左边,所以需要无声无息的移动ul
// 设置过渡时间为0
ul.style.transitionDuration = "0s";
// 让ul没有动画的直接向左偏移一个li
ul.style.left = "-800px";
// 3让上面的代码确定执行结束了再开始执行动画
setTimeout(function(){
// 4.添加动画让新的li[0]动画移动显示
ul.style.transitionDuration = "0.3s";
// 5.设置ul移动动画显示li[0]
ul.style.left = "0px";
},100)
}
</script>
</body>
</html>
效果
