js——实现轮播图

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     };