js之图片轮播简易

心已赠人 2022-09-10 08:24 171阅读 0赞

要想简单的实现图片的轮播，当点击  上一张按钮  跳转到上一张，点击   下一张按钮    跳转到下一张图片。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_20_color_FFFFFF_t_70_g_se_x_16][]

html和css代码：

下面展示js的编写步骤

# 实现步骤： #

1.首先需要获取上一张按钮与下一张按钮这个元素节点，并使用点击事件onclick去实现图片的轮播效果

>  //获取上一张按钮
> 
>             var last = document.getElementsByClassName("last")\[0\];
> 
>             last.onclick = function() \{
> 
> \}
> 
> //    获取下一张按钮
> 
>             var next = document.getElementsByClassName("next")\[0\];
> 
>             next.onclick = function() \{
> 
> \}

2.分析如何将图片进行上下换转，我们需要获取图片img的文档节点，然后根据img将src进行变化，img的src变化则图片也变化，所以我们可以新建数组来存放图片的src.然后设置一个index作为操作数组的一个变量，这里我们设置index = 0;

>  //获取当前img
> 
>             var img = document.getElementsByTagName("img")\[0\];
> 
>             //因为获取的img标签为数组，我们需要更改img中src的话，需要将每个图片中的src存为数组
> 
>             var imgArr = \["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"\];
> 
>             // 设置起始位置的index为0
> 
>             var index = 0;

3.现在我们来操作上一张按钮    和    下一张按钮

业务分析：

通过点击上一张按钮，图片跳转到上一张，说明图片的src改变，就说明我们使用了存放src的数组，并且当处于第一张图片的时候，当点击    上一张按钮   时，图片应该处于最后一张图片，所以我们可以使用一个if条件来判断当前的存放img中src的数组的位置。

点击     下一张按钮    类似。

>  last.onclick = function() \{
> 
>                     //点击上一张按钮，跳转到上一张
> 
>                     // alert("1");
> 
>                     index--;
> 
>                     if (index < 0) \{
> 
>                         index = imgArr.length - 1;
> 
>                     \}
> 
>                     img.src = imgArr\[index\];
> 
>                       
>   
>  
> 
>                 \}
> 
> \}
> 
> //    获取下一张按钮
> 
>             var next = document.getElementsByClassName("next")\[0\];
> 
>             next.onclick = function() \{
> 
>                 // 点击下一张按钮，跳转到下一张
> 
>                 // alert(2);
> 
>                 index++;
> 
>                 if (index > imgArr.length - 1) \{
> 
>                     index = 0;
> 
>                 \}
> 
>                 img.src = imgArr\[index\];
> 
> \}

全部代码展示：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>图片轮播</title>
        <style>
            .outer {
                width: 900px;
                height: 400px;
                margin: 20px auto;
                text-align: center;
            }
        </style>
        <script>
            window.onload = function() {
    
    
                //获取当前img
                var img = document.getElementsByTagName("img")[0];
                //因为获取的img标签为数组，我们需要更改img中src的话，需要将每个图片中的src存为数组
                var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
                // 设置起始位置的index为0
                var index = 0;
                // 获取p标签
                var text = document.getElementsByTagName("p")[0];
                text.innerHTML = "总共" + imgArr.length + "张图片，现在为" + (index + 1) + "张";
    
                //获取上一张按钮
                var last = document.getElementsByClassName("last")[0];
                last.onclick = function() {
                        //点击上一张按钮，跳转到上一张
                        // alert("1");
                        index--;
                        if (index < 0) {
                            index = imgArr.length - 1;
                        }
                        img.src = imgArr[index];
    
                        text.innerHTML = "总共" + imgArr.length + "张图片,现在为" + (index + 1) + "张";
    
    
    
    
                    }
                    //    获取下一张按钮
                var next = document.getElementsByClassName("next")[0];
                next.onclick = function() {
                    // 点击下一张按钮，跳转到下一张
                    // alert(2);
                    index++;
                    if (index > imgArr.length - 1) {
                        index = 0;
                    }
    
                    img.src = imgArr[index];
                    text.innerHTML = "总共" + imgArr.length + "张图片,现在为" + (index + 1) + "张";
    
                }
    
    
    
            };
        </script>
    
    
    </head>
    
    <body>
        <div class="outer">
            
            <p></p>
            <img src="img/1.jpg">
            <button class="last">上一张</button>
            <button class="next">下一张</button>
        </div>
    
    
    </body>
    
    </html>

图片资源：如有侵权的话，请联系我删除哦

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_18_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/074ab9741ea14cb6b6416922541ed040.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiN5oOz5pyJYnVn55qE5bCP6I-c6bif_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/bf4f37d47b6a4fb38de276087c23b8c6.png