<style>
*{
margin:0;
padding:0;
}
img{
width:500px;
height:300px;
display:none;
}
ul{
list-style:none;
}
ol{
width:150px;
height:20px;
background-color:rgba(0, 0, 0,.6);
border-radius:10px;
position:absolute;
left:200px;
bottom:0px;
list-style:none;
}
ol>li{
width:10px;
height:10px;
border-radius:50%;
background-color:rgba(255,255,255,0.5);
float:left;
margin-top:5px;
margin-left:10px ;
}
#container{
position: relative;
width: 500px;
height: 300px;
margin:auto;
}
#arr_left, #arr_right {
width: 50px;
height: 50px;
font-size: 50px;
font-weight: bold;
position: absolute;
top: 45%;
background-color: rgba(255, 255, 255, 0.6);
color: black;
text-align: center;
line-height: 50px;
border-radius: 50%;
}
#arr_right{
right:0px;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li><img style="display:block;" src="https://ts1.cn.mm.bing.net/th/id/R-C.83fa906c406fcf24f5ccb9bb99ca2df1?rik=gsO0BemVJseGvg&riu=http%3a%2f%2fi1.hdslb.com%2fbfs%2farchive%2f324750c6747a5da941b18d1427d42c81759c7dc8.jpg&ehk=hNrXtrMfh%2b8pQDUiiovli%2bHqFCCoFab7a0zJSjAnYWo%3d&risl=&pid=ImgRaw&r=0"></li>
<li><img src="https://pic2.zhimg.com/v2-887c4f76824e7ff3f9f2a6b6f7bc3b78_r.jpg"></li>
<li><img src="https://img.zcool.cn/community/01e58a5d34518ca8012187f4518a0e.jpg@3000w_1l_2o_100sh.jpg"></li>
<li><img src="https://ts1.cn.mm.bing.net/th/id/R-C.abd4829c9387ec1bfd1a276a5c1da122?rik=dl55Voqxy4wINQ&riu=http%3a%2f%2fi1.073img.com%2f140306%2f4343693_144142_1.jpg&ehk=qvhMjT0iGQT5DhH8MTkAzJqUpjHJRScTQTT5hj%2forLM%3d&risl=&pid=ImgRaw&r=0"></li>
<li><img src="https://ts1.cn.mm.bing.net/th/id/R-C.3bad09c7318ed26cb9f49516ebb36c03?rik=qvxyyZZ7TfDHOg&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1206%2f18%2fc3%2f12048831_1340013801131.jpg&ehk=DZlUCdaYnCVQqXyg%2b6TjFX1mMUf1%2bm8bWYgzwyxd8Zs%3d&risl=&pid=ImgRaw&r=0"></li>
</ul>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<div id="arr_left"><</div>
<div id="arr_right">></div>
</div>
<script>
let arrow_left = document.getElementById("arr_left")
let arrow_right = document.getElementById("arr_right")
let current_index = 0
let div = document.querySelector("#container")
let img_arr = document.querySelectorAll('ul img')
let time_id = setInterval(lunbo, 1000)
let cirle_arr = document.querySelectorAll('ol > li')
let grey_color = "rgba(255,255,255,0.5)"
for (let i = 0; i < cirle_arr.length; i++) {
cirle_arr[i].index = i /*给每一个点赋个i*/
cirle_arr[i].onclick = function (event) {
/*点击了白点变黑*/
this.style.backgroundColor = "black"
/*将之前的点变灰*/
cirle_arr[current_index].style.backgroundColor = grey_color
/*当前的点的图片显示*/
img_arr[this.index].style.display = "block"
/*将current_index的图片隐藏*/
img_arr[current_index].style.display = "none"
/*因为点选了新的图片 所以 current_index 就是当前的序号*/
current_index = this.index
}
}
function lunbo() {
current_index++
if (current_index >= img_arr.length) {
current_index = 0
}
for (let i = 0; i < img_arr.length; i++) {
if (current_index == i) {
img_arr[i].style.display = "block"
cirle_arr[i].style.backgroundColor = "black"
} else {
img_arr[i].style.display = "none"
cirle_arr[i].style.backgroundColor = grey_color
}
}
}
div.onmousemove = function () {
clearInterval(time_id)
}
div.onmouseout = function () {
time_id = setInterval(lunbo, 1000)
}
arrow_left.onclick = function () {
cirle_arr[current_index].style.backgroundColor = grey_color
img_arr[current_index].style.display = "none"
if (current_index >= 1) {
current_index--
}
else {
current_index = 4
}
cirle_arr[current_index].style.backgroundColor = "white"
img_arr[current_index].style.display = "block"
}
arrow_right.onclick = function () {
cirle_arr[current_index].style.backgroundColor = grey_color
img_arr[current_index].style.display = "none"
if (current_index < 4) {
current_index++
}
else {
current_index = 0
}
cirle_arr[current_index].style.backgroundColor = "white"
img_arr[current_index].style.display = "block"
}
</script>
</body>
</html>
