Javascript实现图片轮播效果。

Love The Way You Lie 2022-01-16 02:51 434阅读 0赞

用js做一个简单的图片轮播效果。  
思路如下：用JavaScript来控制轮播的图片的样式（margin-left）。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。  
效果图如下。具有以下功能：1.自动图片轮播 2.左右切换图片 3.底下小按钮切换图片。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxMjk3Mw_size_16_color_FFFFFF_t_70]  
话不多说，代码如下。  
首先肯定是HTML代码\`这个没什么说的，先插入需要轮播的图片。底下切换图片的按钮，还有左右按键。

然后是给代码添加样式。添加好后基本样式就已经完成了。让图片横排列。超出父容器部分隐藏。记得给图片的margin-left添加过渡效果（如图）接下来就是让他动起来！！！![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxMjk3Mw_size_16_color_FFFFFF_t_70 1]

这块是最重要的的部分，js代码  
思路如下，先获取元素，让图片切换下一张，这里我使用count++\*元素的marginLeft值。count加一次图片就会切换下一张。然后把这段代码放在计时器中，图片就可以自动切换下一张了。切换的时候底下的小图标的背景色也跟着切换。

ipt>
        var box = document.getElementsByClassName("box_big")[0];
        var spot = document.getElementsByClassName("spot_list");
        var block = document.getElementsByClassName("block")[0];
        var left_btn = document.getElementsByClassName("left_btn")[0];
        var right_btn = document.getElementsByClassName("right_btn")[0];
        var time = null;
        var count = 0;

//计时器
        function showtime() {
            time = setInterval(function () {
                mate();
            }, 1000);
        }
        //正常滚动
        function mate() {
            box.className = "box_big nav";
            spot[count].style.background = "rgba(255, 255, 255, 0.3)";
            count++;
            spot[count > box.children.length - 2 ? 0 : count].style.background = "rgba(91,91,91,0.8)";
            box.style.marginLeft = (count * -700) + "px";
            //添加一次性计时器
            setTimeout(function () {
            //判断count的值。如果大于图片长度，就重0开始+
                if (count > box.children.length - 2) {
                    count = 0;
                    box.className = "box_big";
                    box.style.marginLeft = "0px"
                }
            }, 500)
        }

然后设置鼠标进入计时器关闭，鼠标离开计时器打开。

block.onmouseenter = function () {
            clearInterval(time);
        };
        //鼠标出来计时器打开
        block.onmouseleave = function () {
            showtime();
        };

接下来，来做底下鼠标放在地下图标的时候切换对应的图片。这里我用的是for循环。

for (var i = 0; i < spot.length; i++) {
            spot[i].index = i;
            spot[i].onmouseenter = function () {
                spot[count].style.background = "rgba(255, 255, 255, 0.3)";
                this.style.background = "rgba(91,91,91,0.8)";
                count = this.index;
                box.style.marginLeft = (count * -700) + "px";
            }
    
        }

上面大部分功能已经完成，现在剩下最后一步，左右键切换图片的上一张和下一张。用鼠标点击事件。左边很简单，直接执行开始时候的方法即可（切换方向和自动切换方向相同）。右边用count–

//图片左边划
        left_btn.onclick = function () {
            mate();
        };
            //图片右边划
        right_btn.onclick = function () {
            spot[count].style.backgroundColor = "rgba(255,255,255,0.3)";
            count--;
            if (count < 0) {
                box.className = "box_big";
                count = box.children.length - 2;
                box.style.marginLeft = "-3500px";
            }
            //添加一次性计时器
            setTimeout(function () {
                box.className = "box_big nav";
                box.style.marginLeft = (-700 * count) + "px";
                spot[count].style.backgroundColor = "rgba(91,91,91,0.8)";
            }, 1);
        };

到这里就已经写完了。

完整js代码如下：

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxMjk3Mw_size_16_color_FFFFFF_t_70]: /images/20220114/3cbc75a74fd34f3f9257f0aed801e57f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxMjk3Mw_size_16_color_FFFFFF_t_70 1]: /images/20220114/3a77fb70fe7b4f418c3566477b7cb445.png