JS中简单的图片切换练习（包含思路）

最新推荐文章于 2021-09-27 17:05:31 发布

Fantasc

最新推荐文章于 2021-09-27 17:05:31 发布

阅读量280

点赞数

分类专栏： JS基础学习文章标签： javascript

本文链接：https://blog.csdn.net/Fantasc/article/details/119282873

版权

JS基础学习专栏收录该内容

78 篇文章 8 订阅

订阅专栏

这篇博客详细介绍了如何使用JavaScript实现一个简单的图片轮播功能。通过获取按钮和图片对象，结合数组和索引的概念，实现了点击按钮切换图片并更新提示文字的功能。代码中包含了图片路径的动态修改，以及索引的边界判断，确保了轮播的循环效果。同时，还设置了初始的提示信息，并在每次按钮点击时更新提示内容。

摘要由CSDN通过智能技术生成

点击按钮切换图片：

思路：既然要通过点击按钮来切换图片，那我们就得先分别获取到按钮对象和图片对象，注意：通过标签名获取到的对象，封装到一个数组里进行返回，再给按钮绑定单击事件，分别让两个额按钮一个向前切换，一个向后切换。

创建一个数组存放图片，创建一个变量来保存当前正在显示的图片的索引。在单击事件中修改图片数组的索引，如果需要向前切换，就使索引自减，如果索引大于数组最大索引，则让其等于0。如果索引小于图片数组最小索引，则让其等于图片数组的最大索引，得到循环切换的效果。

最后获取到提示文字的内容，对其进行修改，因为不能将内容写死，需要在每点击一次按钮的时候，对提示内容进行修改。
1. 写好布局、样式
2. 将head中的JS代码写在window.onload()中，以确保要执行的JS代码能获取到DOM对象
3. 通过id或者标签名，获取按钮及图像对象，获取到的图片对象是一个数组
4. 给按钮绑定单击事件函数
5. 创建数组存放图片
6. 修改单击事件中图片的路径（使其动态变化）
7. 判断图片索引的值，是图片切换达到循环的效果
8. 获取提示内容，在单击事件中对其进行修改，使提示内容随按钮单击变化，注意拼串操作
代码及解释如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #outer{
            width: 500px;
            margin: 50px auto;
            padding: 10px;
            background-color: greenyellow;
            text-align: center;
        }
        #outer img{
            width: 500px;
            height: 300px;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            /* 
                点击按钮切换图片
            */

            //获取两个按钮
            var perv = document.getElementById("prev");
            var next = document.getElementById("next");

            /* 
                要切换图片，就是要修改图片的src属性
            */

            //获取img标签
            var img = document.getElementsByTagName("img")[0];
            //创建一个数组用来保存图片的路径
            var imgArr = ["img/one.jpg", "img/two.jpg", "img/three.jpg"];
            //创建一个变量来保存当前正在显示的图片的索引
            var index = 0;      
            
            //设置提示的文字
            //获取id位info的元素
            var info = document.getElementById("info");
            //设置提示文字
            info.innerHTML = "一共"+ imgArr.length +"张图片，当前时第"+ (index+1) +"张";

            //位按钮绑定单机事件
            prev.onclick = function(){
                //如果要切换到上一张，索引就需要自减
                index--;             
                //判断index是否小于0
                if(index < 0){
                    index = imgArr.length - 1;                
                }
                img.src = imgArr[index];

                //每点击一次按钮就需要重新设置一下提示文字的信息
                info.innerHTML = "一共"+ imgArr.length +"张图片，当前时第"+ (index+1) +"张";
            };

            next.onclick = function(){
                //切换图片就是修改图片的src属性，修改元素的属性就是：元素.属性 = 属性值 
                //如果要切换到上一张，索引就需要自增
                index++;
                //判断index是否大于4
                if(index > imgArr.length - 1){
                    index = 0;
                }
                img.src = imgArr[index];
                //每点击一次按钮就需要重新设置一下提示文字的信息
                info.innerHTML = "一共"+ imgArr.length +"张图片，当前时第"+ (index+1) +"张";
            };

        };

    </script>
</head>
<body>
    
    <div id="outer">
        <p id="info">一共 3 张图片，当前时第 1 张</p>
        <img src="img/one.jpg" alt="one" />

        <button id="prev">上一张</button>
        <button id="next">下一张</button>

    </div>

</body>
</html>

Fantasc

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS中简单的图片切换练习（包含思路）

点击按钮切换图片：思路：既然要通过点击按钮来切换图片，那我们就得先分别获取到按钮对象和图片对象，注意：通过标签名获取到的对象，封装到一个数组里进行返回，再给按钮绑定单击事件，分别让两个额按钮一个向前切换，一个向后切换。创建一个数组存放图片，创建一个变量来保存当前正在显示的图片的索引。在单击事件中修改图片数组的索引，如果需要向前切换，就使索引自减，如果索引大于数组最大索引，则让其等于0。如果索引小于图片数组最小索引，则让其等于图片数组的最大索引，得到循环切换的效果。最后获取到提示文字的内
复制链接

扫一扫

专栏目录