loopDiv容器中,wrap存放图片,list是图片下方的圆点,最后是左右按钮;
1 <div id="loopDiv"> 2 <div class="wrap"> 3 <img src="asset/image/loopImg/1.png" class="loopImg"> 4 <img src="asset/image/loopImg/2.png" class="loopImg"> 5 <img src="asset/image/loopImg/3.png" class="loopImg"> 6 <img src="asset/image/loopImg/4.png" class="loopImg"> 7 <img src="asset/image/loopImg/5.png" class="loopImg"> 8 <img src="asset/image/loopImg/6.png" class="loopImg"> 9 <img src="asset/image/loopImg/7.png" class="loopImg"> 10 </div> 11 12 <ul id="list"> 13 <li class="liList"></li> 14 <li class="liList"></li> 15 <li class="liList"></li> 16 <li class="liList"></li> 17 <li class="liList"></li> 18 <li class="liList"></li> 19 <li class="liList"></li> 20 </ul> 21 <div id="left" class="chooseBut"><</div> 22 <div id="right" class="chooseBut">></div> 23 </div>
css
/*容器是relative*/ #loopDiv{ position: relative; /*居中*/ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; /*宽高*/ width: 1200px; height: 360px; overflow: hidden; } .wrap{ position: absolute; /*宽是容器宽度*图片数量*/ width: 8400px; /*通过调整left实现图片的显示*/ /*显示第一张图片*/ left: 0; } .loopImg{ /*浮动*/ float: left; /*布满容器*/ width: 1200px; height: 360px; } .chooseBut{ position: absolute; /*按钮背景大小颜色*/ width: 40px; height: 60px; background-color: rgba(0,0,0,0.4); /*按钮内容大小颜色*/ font-size: 30px; color: #ffffff; /*内容居中*/ display: flex; justify-content: center; align-items: center; /*默认不显示*/ visibility: hidden; } #left{ left: 10px; } #right{ left: 1150px; } #list{ /*调整圆点位置*/ position: absolute; bottom: 0; } #list li{ /*使圆点在一行*/ display: inline-block; width: 10px; height: 10px; background-color: #999999; border-radius: 50%; /*text-align: center;*/ /*line-height: 20px;*/ /*取消编号前的圆点*/ list-style-type: none; /*圆点间的间隔*/ margin-right: 10px; }
js
1 // 容器 2 var loopDiv = document.getElementById("loopDiv"); 3 // 图片容器,不知道为什么用getElementsByClassName获取不到left 4 var wrap = document.querySelector(".wrap"); 5 // 左右按钮 6 var lef = document.getElementById("left"); 7 var rig = document.getElementById("right"); 8 // 小圆点 9 var list = document.getElementsByClassName("liList"); 10 // 将现在的小圆点背景设置为蓝色 11 // list[0].style.cssText = "background-color:red;"; 12 // list[0].style.setProperty("background-color", "red"); 13 list[0].style.backgroundColor = "blue";
启动定时器
1 // 当前的小圆点 2 var currentPage = 1; 3 // 定时器 4 var time = setInterval(func, 1500); 5 function func() { 6 currentPage++; 7 changeImg(); 8 } 9 function changeImg() { 10 if(currentPage == 8){ 11 currentPage = 1; 12 } 13 if(currentPage == 0){ 14 currentPage = 7; 15 } 16 for (var i=0; i<list.length; i++){ 17 list[i].style.backgroundColor = "#999999"; 18 } 19 // left是当前图片编号*(-图片容器宽度) 20 wrap.style.left = parseInt(-1200*(currentPage-1))+"px"; 21 list[currentPage-1].style.backgroundColor = "blue"; 22 }
左右按钮操作
1 // 鼠标进入容器时,显示左右按钮,关闭定时器 2 loopDiv.onmouseenter = function(){ 3 clearInterval(time); 4 lef.style.visibility = "visible"; 5 rig.style.visibility = "visible"; 6 }; 7 // 鼠标离开容器时,隐藏左右按钮,打开定时器 8 loopDiv.onmouseleave = function(){ 9 time = setInterval(func, 1500); 10 lef.style.visibility = "hidden"; 11 rig.style.visibility = "hidden"; 12 }; 13 // 点击左按钮,当前位置减一 14 lef.onclick = function () { 15 currentPage--; 16 changeImg(); 17 }; 18 // 点击右按钮,当前位置加一 19 rig.onclick = function () { 20 currentPage++; 21 changeImg(); 22 };