简单的轮播图效果
Posted bookstorespirit
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的轮播图效果相关的知识，希望对你有一定的参考价值。
1 <style type="text/css"> 2 * 3 margin: 0; 4 padding: 0; 5 6 body 7 display: flex; 8 flex-direction: column; 9 align-items: center; 10 11 #bigbox 12 display: flex; 13 margin-top:100px; 14 15 #box 16 width: 383px; 17 height: 383px; 18 19 #left,#right 20 padding-top: 150px; 21 22 #link 23 margin-top: 20px; 24 25 a 26 display: inline-block; 27 width: 30px; 28 height: 30px; 29 border-radius: 50%; 30 box-shadow: 2px 2px 1px #A9A9A9,-2px -1px 1px #EEEEEE; 31 margin-right: 5px; 32 33 #p 34 margin-top: 50px; 35 display: flex; 36 37 #p p 38 text-align: center; 39 display: flex; 40 flex-direction: column; 41 margin: 10px; 42 height: 110px; 43 44 #p p img 45 margin: auto; 46 width: 80px; 47 height: 80px; 48 49 .bottom 50 border-bottom: 5px solid red; 51 52 .red 53 background-color: red; 54 55 #mouseimg 56 width: 60px; 57 height: 60px; 58 position: absolute; 59 60 </style>
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">
1 var left=my$("left");
1 function my$(id) 2 return document.getElementById(id); 3 4 function randmon(max,min) 5 return Math.round(Math.random()*(max-min)+min); 6 7 8 //获取随机色 9 function getRadomclass() 10 var r=Math.round(Math.random()*255); 11 var g=Math.round(Math.random()*255); 12 var b=Math.round(Math.random()*255); 13 document.body.style.backgroundColor="rgb("+r+","+g+","+b+")"; 14 15 16 17 //获取当前img下标 18 function getNindex() 19 for(var i=0;i<arr.length;i++) 20 if(img.src==arr[i]) 21 return i; 22 23 24 25 26 // 修改p标签和a标签的class名 27 function Nindex(Nindex) 28 for(var i=0;i<links.length;i++) 29 links[i].setAttribute("class",""); 30 simg[i].setAttribute("class",""); 31 32 links[Nindex].setAttribute("class","red"); 33 simg[Nindex].setAttribute("class","bottom"); 34 35 36 37 function attendant() 38 var mouseimg=document.getElementById(‘mouseimg‘) 39 document.onmousemove=function(e) 40 e=e || window.event; 41 mouseimg.style.left=e.pageX+20+‘px‘; 42 mouseimg.style.top=e.pageY-30+‘px‘; 43 44
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 //小圆点事件 24 //遍历a标签所在的links集合 25 for(var i=0;i<links.length;i++) 26 // 取到每一个小圆点(a标签) 27 var link=links[i]; 28 //点击事件 29 link.onclick=function() 30 // 将当前正在被点击的a的href赋值给img标签 31 // this:事件源,指被点击的a 32 oimg.src=this.href; 33 //调用函数,改变背景色 34 getRadomclass(); 35 //调用函数,获取当前显示的a标签的数组下标 36 getNindex(); 37 var index=getNindex(); 38 //调用函数,且实参为当前img标签下标值 39 Nindex(index); 40 //取消a标签的默认跳转行为 41 return false; 42 43 44 45 46 //上一张 47 left.onclick=function() 48 //调用函数,改变背景色 49 getRadomclass(); 50 //调用函数,获取当前显示的a标签的数组下标 51 getNindex(); 52 var index=getNindex(); 53 // 判断: 54 // 如果当前下标为0,则跳转到最后一张,即下标为arr.length-1 55 // 如果不为0,则跳转到上一张,即下标为index-1; 56 if(index==0) 57 img.src=arr[arr.length-1] 58 index=arr.length-1; 59 else 60 img.src=arr[index-1]; 61 index--; 62 63 //调用函数,且实参为当前img标签下标值 64 Nindex(index); 65 66 67 68 //下一张 69 right.onclick=function() 70 //调用函数,改变背景色 71 getRadomclass(); 72 //调用函数,获取当前显示的a标签的数组下标 73 getNindex(); 74 var index=getNindex(); 75 // 判断: 76 // 如果当前下标为最后一张图片的下标,则跳转到第一张,即下标为index为0 77 // 如果不为最后一张,则跳转到下一张,即下标为index+1; 78 if(index==arr.length-1) 79 img.src=arr[0]; 80 index=0; 81 else 82 img.src=arr[index+1]; 83 index++; 84 85 //调用函数,且实参为当前img标签下标值 86 Nindex(index); 87 88 89 90 // function功能与下一张一致 91 // setInterval():每隔s毫秒执行一次, 92 // setTimeout():s毫秒后执行 93 // 格式: 94 // setInterval(function() 95 96 // ,) 97 // 定时器,每隔5秒切换一次 98 var timeid= setInterval(function() 99 // clearInterval(timeid); 100 getRadomclass(); 101 getNindex(); 102 var index=getNindex(); 103 if(index==arr.length-1) 104 img.src=arr[0]; 105 index=0; 106 else 107 img.src=arr[index+1]; 108 index++; 109 110 Nindex(index); 111 ,3000) 112 113 114 115 attendant()
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>
以上是关于简单的轮播图效果的主要内容，如果未能解决你的问题，请参考以下文章