html部分
<body>
<div class="foucs" onmouseover="end()" onmouseout="start()">
<div id="imgs">
<img src="./img/1.jpg" />
<img src="./img/2.jpg" />
<img src="./img/3.jpg" />
<img src="./img/4.jpg" />
<img src="./img/5.jpg" />
</div>
<div class="nav">
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<h1 id="left" onclick="left()"><</h1>
<h1 id="right" onclick="right()">></h1>
</div>
</body>
css样式段
<style>
*{
margin: 0;
padding: 0;
}
div.foucs{
position: relative;
}
div.foucs:hover{
cursor: pointer;
}
div.foucs h1{
position: absolute;
font-size: 50px;
}
div.foucs h1#left{
top: 150px;
}
div.foucs h1#right{
top: 150px;
right: 10px;
}
div.foucs img{
width: 100%;
height: 350px;
display: none;
}
ul{
list-style: none;
position: absolute;
bottom: 10%;
left: 30%;
/* background-color: brown; */
}
ul li{
display: inline-block;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 0 30px;
background-color: darkgrey;
border-radius: 50%;
}
</style>
js部分
<script>
let i = 0;
function demo(){
let imgs = document.getElementById("imgs").children;
let list = document.getElementById("list").children;
for(let n =0;n<imgs.length;n++){
imgs[n].style = "display:none";
list[n].style = "background-color:darkgrey";
}
imgs[i].style = "display:block";
list[i].style = "background-color:red";
i++;
if(i==imgs.length){
i=0;
}
}
demo();
let interval = setInterval(demo,3000);
function end(){
clearInterval(interval);
}
function start(){
interval = setInterval(demo,3000);
}
let j = 0;
let list = document.getElementById("list").children;
while(j<list.length){
list[j].index = j;
list[j].onmouseover = function(){
i = this.index;
demo();
}
j++;
}
function left(){
let imgs = document.getElementById("imgs").children;
if(i==1){
i = imgs.length - 1;
}else if(i==0){
i = imgs.length-2;
}else{
i-=2;
}
// i-=2;
demo();
}
function right(){
demo();
}
</script>
可以自动轮播照片,可以点击导航切换,可以点击左右按钮切换,鼠标悬停在图片上时,停止轮播,离开后继续播放