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

js之图片轮播简易

作者:互联网

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

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