html 与css 没来得及写注释 ，以下为源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 600px;
height: 400px;
margin: auto;
position: relative;
}
img {
width: 600px;
height: 400px;
position: absolute;
opacity: 0;
}
#left_span{
display: inline-block;
width: 10px;
height: 50px;
background: red;
position: absolute;
top: 175px;
}
#right_span{
display: inline-block;
width: 10px;
height: 50px;
background: red;
position: absolute;
top: 175px;
left: 590px;
}
#left_span:hover,#right_span:hover {
cursor: pointer;
}
.div1 div{
width: 30px;
height: 30px;
color: white;
position: absolute;
bottom: 10px;
text-align: center;
line-height: 30px;
}
#div1_1{left: 200px;}
#div1_2{left: 240px;}
#div1_3{left: 280px;}
#div1_4{left: 320px;}
#div1_5{left: 360px;}
.div1_i{
background: blue;
}
.div1 div:hover{
background: blue;
cursor: pointer;
}
.img1{
opacity: 1;
}
</style>
<script type="text/javascript">
var arr= new Array(5);
var darr= new Array(5);
//a表示正展示图片的索引
var a=0;
onload=function(){
var img=document.querySelectorAll(‘img‘);
var div =document.querySelectorAll(‘.div1 div‘);
for (var i=0;i<5;i++) {
arr[i]=img[i];
img[i].index=i
darr[i]=div[i];
div[i].index=i;
}
//通过计时器 让图片自己切换
var time
function mytime(){
//通过清空当前img的类名，清空透明度
arr[a].className =‘‘;
//通过清空当前div的类名，改变div背景
darr[a].className=‘‘;
//获得下一个图片索引
a++;
//判断上一个索引是否大于四 若大于四 变成第0个
if (a>4) {
a=0;
}
//通过设置下一张图片类名，设置透明度为1.
arr[a].className=‘img1‘;
//通过设置下一个div类名，设置其背景.
darr[a].className=‘div1_i‘;
}
//开启计时器
time = setInterval(mytime,1000);
//鼠标移入时停止计时器
var div = document.querySelector(‘.div1‘);
div.onmouseover=function(){
clearInterval(time);
}
//鼠标移出开始计时器
div.onmouseout=function(){
time = setInterval(mytime,1000);
}
//鼠标移入下面div中，改变图片
for (arrDiv of darr){
arrDiv.onmousemove=function(){
//先清空img div的类名
arr[a].className=‘‘;
darr[a].className=‘‘;
//移入的div设置背景及对应角标图片显示
arr[this.index].className=‘img1‘;
this.className=‘div1_i‘;
//改变a的值，a表示正展示图片的索引
a=this.index;
}
}
}
//初始时 ，第一张图片透明度为1，其他透明度都为零。（你也可以改变其z-index来实现）
function left_onclick(){
//通过清空当前img的类名，清空透明度
arr[a].className=‘‘;
//通过清空当前div的类名，清除背景
darr[a].className=‘‘;
//获得上一个图片索引
a--;
//判断上一个索引是否小于零 若小于零 变成第四个
if(a<0){
a=4;
}
//通过设置上一张图片类名，设置透明度为1.
arr[a].className=‘img1‘;
//通过设置上一个div类名，设置其背景.
darr[a].className=‘div1_i‘;
}
function right_onclick(){
//通过清空当前img的类名，清空透明度
arr[a].className =‘‘;
//通过清空当前div的类名，改变div背景
darr[a].className=‘‘;
//获得下一个图片索引
a++;
//判断上一个索引是否大于四 若大于四 变成第0个
if (a>4) {
a=0;
}
//通过设置下一张图片类名，设置透明度为1.
arr[a].className=‘img1‘;
//通过设置下一个div类名，设置其背景.
darr[a].className=‘div1_i‘;
}
</script>
</head>
<body>
<div class="div1">
<img class="img1" src="img/p1.jpg" />
<img class="" src="img/p2.jpg" />
<img class="" src="img/p3.jpg" />
<img class="" src="img/p4.jpg" />
<img class="" src="img/p5.jpg" />
<span id="left_span" onclick="left_onclick();"></span>
<span id="right_span" onclick="right_onclick();"></span>
<div id="div1_1" class="div1_i">0</div>
<div id="div1_2">1</div>
<div id="div1_3">2</div>
<div id="div1_4">3</div>
<div id="div1_5">4</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/xiaomingzhangbiao/p/9801611.html