js实现轮播图点击按钮切换下一张图片

女爷i 2022-09-11 15:26 281阅读 0赞

具体实现步骤：

2.1 点击右箭头 让图片依次往后进行切换  如果切换到最后一张 回到第一张 1--2--3--4--1

2.1.1 获取元素 按钮 p img

2.1.2 添加事件 加给按钮

2.1.3 图片切换到下一张

2.1.4 不知道是第几张图 假设 n = 1

2.1.5 更新img的地址 img.src = '';

2.1.6 图片+1 之后 判断是不是已经是最后一张 如果n == 5  n = 1

2.2 点击左箭头 让图片依次往前切换 如果是第一张 回到最后一张 1--4--3--2--1

2.2.1 获取元素 按钮 p img

2.2.2 添加事件 加给按钮

2.2.3 图片切换到上一张

2.2.4 通过 n 获取当前是第几张图片

2.2.5 更新img的地址 img.src = '';

2.2.6 图片-1 之后 判断是不是已经是第一张 如果n == 0  n = 4

<style>
            * {
                padding: 0;
                margin: 0;
            }
    
            .wrap {
                position: relative;
                width: 700px;
                height: 400px;
                margin: 10px auto;
            }
    
            .wrap p {
                color: #fff;
                text-align: center;
                line-height: 20px;
                background-color: #000;
            }
    
            .wrap img {
                vertical-align: middle;
                width: 100%;
                height: 360px;
            }
    
            .wrap button {
                width: 30px;
                height: 30px;
                font-size: 20px;
                color: #fff;
                background: rgba(0, 0, 0, 0.5);
                text-align: center;
                line-height: 30px;
                outline: none;
                position: absolute;
                top: 50%;
                margin-top: -15px;
            }
    
            .btn1 {
                right: 0;
            }
    
            .btn2 {
                left: 0;
            }
        </style>

<div class="wrap">
            <p>1/4</p>
            <img src="./img1.jpg" alt="">
            <p>动漫1</p>
            <button class="btn1">></button>
            <button class="btn2"><</button>
    
        </div>

<script>
            //1、获取元素 按钮 p img
            var img = document.getElementsByTagName('img')[0];
            var btns = document.getElementsByTagName('button');
            var ps = document.getElementsByTagName('p');
            console.log(btns, img, ps);
            //4、不知道照片处于第几张 假设一个变量存初始值
            var n = 1;
            //2、添加事件 加给按钮 btns
            btns[0].onclick = function () {
                //3、写具体代码操作  
                n++;
                console.log(n);
                if (n == 5) {
                    n = 1
                }
                //5、图片切换到下一张
                img.src = './img' + n + '.jpg'
                //获取p标签内容
                //设置p标签内容里面的数字
                ps[0].innerHTML = n + '/4';
                ps[1].innerHTML = '动漫' + n;
    
            }
            btns[1].onclick = function () {
                //3、写具体代码操作  图片切换到下一张
                n--;
                console.log(n);
                if (n == 0) {
                    n = 4
                }
                //5、切换图片
                img.src = './img' + n + '.jpg'
                //获取p标签内容
                //设置p标签内容里面的数字
                ps[0].innerHTML = '' + n + '/4';
                ps[1].innerHTML = '动漫' + n;
            }
        </script>

效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/9b38c3548a084865a057db26c1db3eb4.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/bb041054a19749f5a113bf5419fb4dd6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关用原生js实现轮播图效果，点击切换图片、定时切换

其实轮播图挺简单的，功能实现就是Javascript 不懂的朋友可以私信我哦！要想效果好，边框阴影加圆角： 1：边框 boder 2：阴影 shadow(box-

r囧r小猫/ 2023年07月03日 10:51/ 0 赞/ 135 阅读

相关 CSS+JS 实现--点击切换轮播图（简单小程序）

先上效果图，看你们想i要的是不是这个效果 ![20200924123558520.gif][] 话不多说，代码附上 <!DOCTYPE html> <ht

谁借莪１个温暖的怀抱￠/ 2022年12月10日 07:05/ 0 赞/ 252 阅读

相关用js实现点击切换+自动切换的轮播图

用js实现点击切换+自动切换的轮播图之前博主写过一篇用css实现轮播图的文章,可以看到用css实现的轮播图也能实现我们所需要的功能。那么这些功能用js该如何实现呢？我们

短命女/ 2022年10月29日 13:22/ 0 赞/ 478 阅读

相关 js实现轮播图点击按钮切换下一张图片

具体实现步骤： 2.1 点击右箭头让图片依次往后进行切换如果切换到最后一张回到第一张 1--2--3--4--1

女爷i/ 2022年09月11日 15:26/ 0 赞/ 282 阅读

相关原生js点击轮播点击切换图片

![20180413143155395][] <!DOCTYPE html> <html> <head> <meta charset=

╰+哭是因爲堅強的太久メ/ 2022年05月27日 06:51/ 0 赞/ 293 阅读

相关图片左右点击切换轮播js特效

常用相册图片左右点击切换轮播，可应用在商品详情、汽车展示、相册展示等，jQuery左右按钮切换图片，点击小图缩略图可切换到对应的大图，当缩略图过多时可点击左右按钮控制底部缩略图

Love The Way You Lie/ 2022年03月28日 05:49/ 0 赞/ 294 阅读

相关 css实现图片点击轮播

css实现点击按钮图片轮播 html代码 <head> <meta charset="utf-8" /> <title></title>

Love The Way You Lie/ 2022年01月23日 02:07/ 0 赞/ 388 阅读

相关原生js点击按钮切换图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态切换图片</

谁借莪１个温暖的怀抱￠/ 2022年01月05日 11:27/ 0 赞/ 419 阅读

相关网页图片轮播,一张图时不轮播,大于一张时轮播

使用swiper做轮播，需求是images文件夹下有多少图片就轮播多少图片，一张图片时不轮播。因前端js不能获取目录和文件列表，所以在这里使用了php来读取图片文件列表，文

柔情只为你懂/ 2021年10月29日 12:18/ 0 赞/ 391 阅读

相关 Js实现图片点击切换与轮播

Js实现图片点击切换与轮播图片点击切换 <!DOCTYPE html> <html> <head>

浅浅的花香味﹌/ 2021年10月23日 18:42/ 0 赞/ 432 阅读