js实现轮播图
Posted 苦瓜汁儿加糖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现轮播图相关的知识，希望对你有一定的参考价值。
js实现轮播图，第一个ul用来显示大图片，第二个ul用来显示图片下方的黄点，第三个ul只是显示图片，左右箭头循环切换图片，黄点也可以点击
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>轮播图</title> 6 <link rel="stylesheet" href="css/reset.css"> 7 <link rel="stylesheet" href="css/in.css"> 8 </head> 9 <body> 10 <div class="wrap"> 11 <ul class="pic"> 12 <!--<li class="active"><img src="images/maldives_1.jpg" alt="#"></li> 13 <li><img src="images/maldives_2.jpg" alt="pic"></li> 14 <li><img src="images/maldives_3.jpg" alt="pic"></li> 15 <li><img src="images/maldives_4.jpg" alt="pic"></li>--> 16 </ul> 17 <ul class="page-item"></ul> 18 <ul class="small-pic"> 19 <li><img src="images/thumbnail_1.jpg" alt="small-pic"></li> 20 <li><img src="images/thumbnail_2.jpg" alt="small-pic"></li> 21 <li><img src="images/thumbnail_3.jpg" alt="small-pic"></li> 22 <li><img src="images/thumbnail_4.jpg" alt="small-pic"></li> 23 </ul> 24 <span><</span> 25 <span>></span> 26 </div> 27 <script> 28 var index = 0; 29 var arrSrcAddress = [‘images/maldives_1.jpg‘,‘images/maldives_2.jpg‘, 30 ‘images/maldives_3.jpg‘,‘images/maldives_4.jpg‘]; 31 // arrSrcAddress[i].index = 32 var imageNumber = 4;//图片数量 33 var dWrap = document.getElementsByClassName("wrap")[0]; 34 var ulPic = dWrap.getElementsByClassName("pic")[0]; 35 console.log(ulPic); 36 //生成li 37 var picLiHtml = ""; 38 var singleImageNumber = 0; 39 for(var i=0;i<imageNumber;i++){ 40 // alert("开始创建li"); 41 // picLi += "<li><img src=‘images/maldives_"+i+1+".jpg‘ alt="#"></li>"; 42 picLiHtml +="<li><img src="+arrSrcAddress[i]+" alt=‘pic‘></li>"; 43 }; 44 ulPic.innerHTML=picLiHtml; 45 console.log(picLiHtml); 46 //li生成完成 47 //第一个li加上active 48 var picLi = ulPic.getElementsByTagName("li"); 49 picLi[0].className = "active"; 50 // console.log(picLi); 51 //第二个ul 52 var ulPageItem = dWrap.getElementsByClassName("page-item")[0]; 53 //生成第二个ul的li 54 var pageItemLiHtml = ""; 55 for(var i=0;i<imageNumber;i++){ 56 pageItemLiHtml += "<li></li>"; 57 console.log(pageItemLiHtml); 58 } 59 ulPageItem.innerHTML = pageItemLiHtml; 60 var pageItemLi = ulPageItem.getElementsByTagName("li"); 61 pageItemLi[0].className = "present"; 62 // 获得左右箭头 63 var arrow = dWrap.getElementsByTagName("span"); 64 65 for (var i=0;i<pageItemLi.length;i++){ 66 pageItemLi[i].index = i;//pageItemLi后忘记加[i] 67 pageItemLi[i].onclick = function(){ 68 index = this.index; 69 for (var i=0;i<picLi.length;i++){ 70 picLi[i].className = ""; 71 pageItemLi[i].className = ""; 72 } 73 picLi[index].className = "active";//this写成pageItemLi 74 pageItemLi[index].className = "present"; 75 } 76 }; 77 arrow[1].onclick = function(){ 78 if(index<=0){index=4} 79 index--; 80 for(var j=0;j<picLi.length;j++){ 81 picLi[j].className = ""; 82 pageItemLi[j].className = ""; 83 console.log(index); 84 } 85 picLi[index].className = "active"; 86 pageItemLi[index].className = "present"; 87 88 }; 89 arrow[0].onclick = function(){ 90 if(index>=picLi.length-1){index=-1;} 91 index++; 92 for(var j=0;j<picLi.length;j++){ 93 picLi[j].className = ""; 94 pageItemLi[j].className = ""; 95 } 96 picLi[index].className = "active"; 97 pageItemLi[index].className = "present"; 98 }; 99 </script> 100 </body> 101 </html>
以上是关于js实现轮播图的主要内容，如果未能解决你的问题，请参考以下文章