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实现轮播图
原文地址：https://www.cnblogs.com/wuyufei/p/10453694.html