使用JS实现轮播图

实现原理：
将图片在一行中平铺，然后计算偏移量再用定时器实现定时轮播。
思路如下：
1.首先创建一个div1，限定其宽度和高度，并使用overflow:hidden，且设置position为relative；
2.再创建一个装载图片的div2，宽度为div中所有图片的宽度，其中内容用"float:left"使其图片水平浮动，此时图片在一行中，且设置position为absolute；
3.添加两个按钮，改变div2的水平位置，点击按钮实现手动轮播；
4.添加一个定时器，使其朝一个方向自动轮播，并设置当用户鼠标放到图片时停止轮播，滑出时再定时播放。
5.设置底部小圆点，使用户清楚图片所处位置，并实现点击小圆点可切换至相应图片。
具体实现如下：
一、HTML布局网页结构

<div class="css_box" id="js_box">
        <div class="slider_main" id="slider_main_block" style="left:0">
                <div class="slider_main_img"><a href="#"><img src="./images/img1.webp" alt="#"></a></div>
                <div class="slider_main_img"><a href="#"><img src="./images/img2.webp" alt="#"></a></div>
                <div class="slider_main_img"><a href="#"><img src="./images/img3.webp" alt="#"></a></div>
                <div class="slider_main_img"><a href="#"><img src="./images/img4.webp" alt="#"></a></div>
                <div class="slider_main_img"><a href="#"><img src="./images/img5.webp" alt="#"></a></div>
        </div>
        <div class="slider_ctrl" id="slider_ctrl">
                <span class="slider_ctrl_prev"><</span>
                <span class="slider_ctrl_next">></span>
        </div>
    </div>

二、CSS网页样式布局

*{
                margin: 0;
                padding: 0;
            }
            .css_box{               /*显示图片的容器div，限定大小,超出部分overflow*/
                position: relative;
                margin: 100px auto;
                width: 900px;;
                height: 467px;
                overflow: hidden;
            }
            .slider_main{           /*装载图片的div*/
                position: absolute;
                width: 4500px;
                height: 467px;
            }
            .slider_main img{
                float: left;
                width: 900px;
                height: 467px;
            }
            .slider_ctrl{
                width: 100%;
                height: 80px;
                color: white;
                text-align: center;
                position: absolute;
                top:210px;   
                font-size: 30px;
                font-weight: 100;
                line-height: 80px;
                display: none;
            }
            .slider_ctrl_prev{
                display: block;
                width: 50px;
                height: 80px;
                background: rgba(0, 0, 0, 0.5);
                float: left;
                cursor: pointer;
            }
            .slider_ctrl_next{
                display: block;
                width: 50px;
                height: 80px;
                background: rgba(0, 0, 0, 0.5);
                float: right;
                cursor: pointer;
            }
            .css_box:hover .slider_ctrl{
                display: block;
            }
            .slider_ctrl_con{
                position: absolute;
                bottom: 5%;
                left: 45%;
            }
            .slider_ctrl_con li{        /*底部小圆点*/
                list-style: none;
                width: 12px;
                height: 12px;
                background: white;
                float: left;
                margin-left: 10px;
                border-radius: 100%;
                cursor: pointer;
            }                       
            .slider_ctrl_con .current_pot{
                background: red;
            }

三、JS代码实现
1.DOM操作获取需要的元素

  /*1.DOM操作获取元素*/
        var js_box = document.getElementById("js_box");     /*显示图片的盒子*/
        var slider_main_block = document.getElementById("slider_main_block");   /*装有图片的盒子*/
        var imgs = slider_main_block.children;              /*获取图片的元素*/
        var slider_ctrl = document.getElementById("slider_ctrl");  /*获取控制按钮的元素*/

2.根据图片的数量动态添加底部小圆点元素

/*2.根据图片的数量动态添加底部小圆点元素*/
        var div = document.createElement("div");
        div.className = "slider_ctrl_con";
        var ul = document.createElement("ul");
        for(var i = 0; i < imgs.length; i++)
        {
            var li = document.createElement("li");
            if ( i == 0){
                li.className = "current_pot";   /*设置第一个li的类名为current_pot，表示当前图片所在位置*/
            }
            ul.insertBefore(li,ul.children[1]);
        }
        div.appendChild(ul);
        js_box.appendChild(div);

3.设置当前底部小圆点的样式

/*3.设置当前底部小圆点的样式*/
        var index = 0;
        var dots = document.getElementsByTagName("li");
        function showCurrentDot() {
            for(var i = 0; i < dots.length; i++) {
                dots[i].className="";
            }
            dots[index].className = "current_pot";
        }

4.设置手动播放，单击两边控制按钮实现图片切换效果;

        /*4.设置手动播放，单击两边控制按钮实现图片切换效果*/
       function fnNext_img() {
            var nextLocation;       /*下一张图片的位置*/
            if(slider_main_block.style.left == "-3600px") {
                nextLocation = 0;
            }else{
                nextLocation = parseInt(slider_main_block.style.left) - 900;
            }
            slider_main_block.style.left = nextLocation + "px";

            index++;
            if(index > 4) {
                index = 0;
            }
            showCurrentDot();
       }
       
       function fnPrev_img() {
            var prevLocation;       /*上一张图片的位置*/
            if(slider_main_block.style.left == "0px") {
                nextLocation = -3600;
            }else{
                nextLocation = parseInt(slider_main_block.style.left) + 900;
            }
            slider_main_block.style.left = nextLocation + "px";

            index--;
            if(index < 0) {
                index = 4;
            }
            showCurrentDot();
       }
       slider_ctrl.children[0].onclick = function(){
            fnPrev_img();
       }
       slider_ctrl.children[1].onclick = function(){
            fnNext_img();
       }

5.设定一个计时器，然后创建一个可以自动播放的函数autoPlay()，最后调用这个函数即可实现自动播放，并实现鼠标放上时停止播放，移开又继续播放。

/*5.设置自动播放图片autoPlay()*/
       var timer = null;
       function autoPlay(){
            timer = setInterval( function () {
               fnNext_img();
           },2000);
       }
       autoPlay();  /*自动播放图片*/

       /*鼠标掠过时停止播放*/
       js_box.onmouseenter  = function(){
           clearInterval(timer);
       }
       /*鼠标移开继续播放*/
       js_box.onmouseleave = function(){
           autoPlay();
       }

6.点击小圆点时，转到相应的图片。

 /*6.点击小圆点时，转到相应的图片*/
  for(var i = 0; i < dots.length; i++) {
           (function(i){
            dots[i].onclick = function(){
                var dis = index - i;
                var location = parseInt(slider_main_block.style.left) + dis*900;
                slider_main_block.style.left = location + "px";
                index = i;
                showCurrentDot();
            }
           })(i);
       }   

最终效果如下：

参考文章：https://www.cnblogs.com/zhuzhenwei918/p/6416880.html?utm_source=tuicool&utm_medium=referral