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; οnlοad=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.οnmοuseοver=function(){ clearInterval(time); } //鼠标移出开始计时器 div.οnmοuseοut=function(){ time = setInterval(mytime,1000); } //鼠标移入下面div中，改变图片 for (arrDiv of darr){ arrDiv.οnmοusemοve=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" alt=""/> <img class="" src="img/p2.jpg" alt=""/> <img class="" src="img/p3.jpg" alt=""/> <img class="" src="img/p4.jpg" alt=""/> <img class="" src="img/p5.jpg" alt=""/> <span id="left_span" οnclick="left_onclick();"></span> <span id="right_span" οnclick="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
相关资源：JavaScript HTML CSS实现图片轮播