1 <body> 2 <div id="p"> 3 <p class="bottom"><img src="img/1__03.jpg">当前在第一张</p> 4 <p><img src="img/1__11.jpg">当前在第二张</p> 5 <p><img src="img/1__07.jpg">当前在第三张</p> 6 <p><img src="img/1__09.jpg">当前在第四张</p> 7 </div> 8 <div id="bigbox"> 9 <div id="left"> 10 <img src="img/left.png" > 11 </div> 12 <div id="box"> 13 <img src="img/1__03.jpg" id="img"> 14 </div> 15 <div id="right"> 16 <img src="img/right.png" > 17 </div> 18 </div> 19 <div id="link"> 20 <a href="img/1__03.jpg" class="red"></a> 21 <a href="img/1__11.jpg"></a> 22 <a href="img/1__07.jpg"></a> 23 <a href="img/1__09.jpg"></a> 24 </div> 25 <img src="img/71_4.jpg" id="mouseimg"> 26 </body>
<style type="text/css">
* {margin: 0;padding: 0;}
body {display: flex;flex-direction: column;align-items: center;}
#bigbox {display: flex;margin-top:100px;}
#box {width: 383px;height: 383px;}
#left,#right {padding-top: 150px;}
#link {margin-top: 20px;}
a {display: inline-block;width: 30px;height: 30px;border-radius: 50%;box-shadow: 2px 2px 1px #A9A9A9,-2px -1px 1px #EEEEEE;
margin-right: 5px;}
#p {margin-top: 50px;display: flex;}
#p p{text-align: center;display: flex;flex-direction: column;margin: 10px;height: 110px;}
#p p img {margin: auto;width: 80px;height: 80px;}
.bottom {border-bottom: 5px solid red;}
.red {background-color: red;}
#mouseimg {width: 60px;height: 60px;position: absolute;}
</style>
1 var left=my$("left"); 2 var right=my$("right"); 3 var box=my$("box"); 4 var oimg=my$("img"); 5 var p=my$("p"); 6 //获取a标签集合 7 var links=document.querySelectorAll("#link a"); 8 //获取p标签集合 9 var simg=document.querySelectorAll("#p p"); 10 // 定义空数组,用来存放a标签的href地址 11 var arr=[]; 12 13 // 给body设置延时属性 14 document.body.style.transition=‘all 1s‘; 15 16 //将a标签的href地址放入数组 17 for(var i=0;i<links.length;i++){ 18 arr[i]=links[i].href 19 } 20 // console.log(arr) 21 22 //小圆点事件 23 //遍历a标签所在的links集合 24 for(var i=0;i<links.length;i++){ 25 // 取到每一个小圆点(a标签) 26 var link=links[i]; 27 //点击事件 28 link.onclick=function(){ 29 // 将当前正在被点击的a的href赋值给img标签 30 // this:事件源,指被点击的a 31 oimg.src=this.href; 32 //调用函数,改变背景色 33 getRadomclass(); 34 //调用函数,获取当前显示的a标签的数组下标 35 getNindex(); 36 var index=getNindex(); 37 //调用函数,且实参为当前img标签下标值 38 Nindex(index); 39 //取消a标签的默认跳转行为 40 return false; 41 } 42 } 43 44 //上一张 45 left.onclick=function(){ 46 //调用函数,改变背景色 47 getRadomclass(); 48 //调用函数,获取当前显示的a标签的数组下标 49 getNindex(); 50 var index=getNindex(); 51 // 判断: 52 // 如果当前下标为0,则跳转到最后一张,即下标为arr.length-1 53 // 如果不为0,则跳转到上一张,即下标为index-1; 54 if(index==0){ 55 img.src=arr[arr.length-1] 56 index=arr.length-1; 57 }else{ 58 img.src=arr[index-1]; 59 index--; 60 } 61 //调用函数,且实参为当前img标签下标值 62 Nindex(index); 63 } 64 65 //下一张 66 right.onclick=function(){ 67 //调用函数,改变背景色 68 getRadomclass(); 69 //调用函数,获取当前显示的a标签的数组下标 70 getNindex(); 71 var index=getNindex(); 72 // 判断: 73 // 如果当前下标为最后一张图片的下标,则跳转到第一张,即下标为index为0 74 // 如果不为最后一张,则跳转到下一张,即下标为index+1; 75 if(index==arr.length-1){ 76 img.src=arr[0]; 77 index=0; 78 }else{ 79 img.src=arr[index+1]; 80 index++; 81 } 82 //调用函数,且实参为当前img标签下标值 83 Nindex(index); 84 } 85 86 // function功能与下一张一致 87 // setInterval():每隔s毫秒执行一次, 88 // setTimeout():s毫秒后执行 89 // 格式: 90 // setInterval(function(){ 91 92 // },) 93 // 定时器,每隔5秒切换一次 94 var timeid= setInterval(function(){ 95 // clearInterval(timeid); 96 getRadomclass(); 97 getNindex(); 98 var index=getNindex(); 99 if(index==arr.length-1){ 100 img.src=arr[0]; 101 index=0; 102 }else{ 103 img.src=arr[index+1]; 104 index++; 105 } 106 Nindex(index); 107 },3000) 108 109 attendant()
function my$(id){ return document.getElementById(id); } function randmon(max,min){ return Math.round(Math.random()*(max-min)+min); } //获取随机色 function getRadomclass(){ var r=Math.round(Math.random()*255); var g=Math.round(Math.random()*255); var b=Math.round(Math.random()*255); document.body.style.backgroundColor="rgb("+r+","+g+","+b+")"; } //获取当前img下标 function getNindex(){ for(var i=0;i<arr.length;i++){ if(img.src==arr[i]){ return i; } } } // 修改p标签和a标签的class名 function Nindex(Nindex){ for(var i=0;i<links.length;i++){ links[i].setAttribute("class",""); simg[i].setAttribute("class",""); } links[Nindex].setAttribute("class","red"); simg[Nindex].setAttribute("class","bottom"); } function attendant(){ var mouseimg=document.getElementById(‘mouseimg‘) document.onmousemove=function(e){ e=e || window.event; mouseimg.style.left=e.pageX+20+‘px‘; mouseimg.style.top=e.pageY-30+‘px‘; } }
原文：https://www.cnblogs.com/BookstoreSpirit/p/11391702.html