Js实战之实现图片的切换

最新推荐文章于 2023-02-03 18:31:08 发布

PCC.

最新推荐文章于 2023-02-03 18:31:08 发布

阅读量8.9k

点赞数 5

分类专栏：前端-JavaScript基础文章标签： html5 javascript html

本文链接：https://blog.csdn.net/weixin_44278828/article/details/120621650

版权

实现图片间的切换

代码的主要思路：
1、先给“下一张”和“上一张”两个按钮绑定单击响应事件；
2、获取img标签对象，用于修改src属性的值，实现图片的切换；
3、切换图片实质上就是修改img标签里面src属性的值；
4、创建一个数组用来保存图片，这样的话，在图片切换的过程中操作起来会更加方便，只要操作数组的索引即可，如要切换到下一张，将imgArr[0]---->imgArr[1]，即可；
5、创建一个变量用来保存当前正在显示的图片的索引，这样操作图片更加简单；
6、需要注意的是，如果当前显示的图片为最后一张时，下一张使它自动跳回第一张；同理如果当前显示的图片为第一张时，上一张使它自动跳回最后一张；
7、设置顶部的文字先要获取对应的p标签对象；
8、通过修改p标签里面的文字就可以实现顶部文字的实时变换；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片切换练习</title>
    <style type="text/css">
        * {
   
            margin: 0;
            padding: 0;
        }

        #outer {
   
            width: 500px;
            margin: 50px auto;
            padding: 30px;
            background-color: aquamarine;
        }
    </style>

最低0.47元/天解锁文章

PCC.

关注

5
点赞
踩
56

收藏

觉得还不错? 一键收藏
0
评论
Js实战之实现图片的切换

实现图片间的切换代码的主要思路：1、先给“下一张”和“上一张”两个按钮绑定单击响应事件；2、获取img标签对象，用于修改src属性的值，实现图片的切换；3、切换图片实质上就是修改img标签里面src属性的值；4、创建一个数组用来保存图片，这样的话，在图片切换的过程中操作起来会更加方便，只要操作数组的索引即可，如要切换到下一张，将imgArr[0]---->imgArr[1]，即可；5、创建一个变量用来保存当前正在显示的图片的索引，这样操作图片更加简单；6、需要注意的是，如果当前显示的图片
复制链接

扫一扫