效果如图
图片的切换有过渡效果
有小圆点和按钮点击切换
有鼠标放置停止轮播
左边的按钮已经预留了小米官网的左侧列表空间
所以
css
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.box{
width:1226px;
height:460px;
/* background:red; */
margin:0 auto;
position: relative;
}
.imgs{
width:100%;
height:100%;
position: relative;
}
.imgs>li{
width:100%;
height:100%;
position: absolute;
top:0;
left:0;
opacity: 0;
transition: all .5s linear;
}
.imgs>li.show{
opacity: 1;
}
.imgs>li>img{
display: block;
width:100%;
height:100%;
}
.cirs{
width:100px;
height:20px;
/* background:red; */
position: absolute;
right:20px;
bottom:20px;
}
.cirs>li{
width:10px;
height:10px;
background:rgba(0,0,0,.5);
float:left;
margin:5px;
border-radius: 10px;
transition: all .5s linear;
}
.cirs>li.cbg{
background:rgba(255,255,255,.5);
}
.left{
width: 41px;
height: 69px;
background-color: transparent;
color: lightgray;
font-size: 36px;
text-align: center;
line-height: 65px;
position: absolute;
top: 195.5px;
left: 234px;
cursor: pointer;
z-index: 2;
}
.left:hover{
background-color: rgba(42, 42, 42, 0.8);
color: white;
}
.right{
width: 41px;
height: 69px;
background-color: transparent;
color: lightgray;
font-size: 36px;
text-align: center;
line-height: 65px;
position: absolute;
top: 195.5px;
right: 0;
cursor: pointer;
}
.right:hover{
background-color: rgba(42, 42, 42, 0.8);
color: white;
}
</style>
html
<div class="box">
<ul class="imgs">
<li class="show"><img src="img/1.jpg" ></li>
<li><img src="img/2.webp" ></li>
<li><img src="img/3.webp" ></li>
<li><img src="img/4.webp" ></li>
<li><img src="img/5.webp" ></li>
</ul>
<ul class="cirs">
<li class="cbg"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="left"><</div>
<div class="right">></div>
</div>
js
<script>
/*
图片以及小圆点的自动切换
点击小圆点切换图片
点击左右按钮切换图片
*/
//获取元素
var imgs = document.querySelectorAll('.imgs>li');
//console.log(imgs);
var cirs = document.querySelectorAll('.cirs>li');
var box = document.querySelector('.box');
var num = 0;
var left = document.getElementsByClassName('left')[0];
var right = document.getElementsByClassName('right')[0];
//设置定时器
var time = setInterval(run,2000);
//给box绑定事件
box.onmouseover = function(){
clearInterval(time);
}
box.onmouseout = function(){
time = setInterval(run,2000);
}
function run(){
clear();
num++;
if(num>=imgs.length){
num = 0;
}
//设置指定图片显示
imgs[num].setAttribute('class','show');
cirs[num].setAttribute('class','cbg');
}
//给小圆点绑定点击事件
for(var i=0;i<cirs.length;i++){
cirs[i].index = i;
cirs[i].onclick = function(){
clear();
num = this.index;
imgs[num].setAttribute('class','show');
cirs[num].setAttribute('class','cbg');
}
}
function clear(){
for(var i=0;i<imgs.length;i++){
imgs[i].removeAttribute('class');
cirs[i].removeAttribute('class');
}
}
//给左右按钮绑定点击事件
right.onclick = function(){
clear();
if(num == 4){
num = 0;
imgs[num].setAttribute('class','show');
cirs[num].setAttribute('class','cbg');
}else{
num++;
imgs[num].setAttribute('class','show');
cirs[num].setAttribute('class','cbg');
console.log(num);
}
}
left.onclick = function(){
clear();
if(num == 0){
num = 4;
imgs[num].setAttribute('class','show');
cirs[num].setAttribute('class','cbg');
}else{
num--;
imgs[num].setAttribute('class','show');
cirs[num].setAttribute('class','cbg');
console.log(num);
}
}
</script>