首页 > 其他分享> > js之图片轮播简易

js之图片轮播简易

2021-09-06 22:31:48 作者：互联网

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

html和css代码：

<body>
    <div class="outer">
        <!-- 实现图片的轮播 
            并告诉用户现在是第几张图片
        -->
        <p></p>
        <img src="img/1.jpg">
        <button class="last">上一张</button>
        <button class="next">下一张</button>
    </div>


</body>

 <style>
        .outer {
            width: 900px;
            height: 400px;
            margin: 20px auto;
            text-align: center;
        }
    </style>

下面展示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>

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

标签：index,一张,轮播,img,src,js,简易,按钮,imgArr
来源： https://blog.csdn.net/qq_45030966/article/details/120145990