JS实现--翻页（简单）

青旅半醒 2022-12-10 02:24 233阅读 0赞

使用js实现简单的翻页效果

上效果图

![20200923141457974.gif][]

上代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .banner{
                width: 600px;
            }
        </style>
    </head>
    <body>
        <img src="../images/a.webp" alt="" class="banner">
        <button id="next">下一张</button>
        <button id="last">上一张</button>
    </body>
    <script>
        var banner=document.getElementsByClassName("banner")[0];
        var next=document.getElementById("next");
        var last=document.getElementById("last");
        var imgs=["a","b","c"];
    
        var x=0;
        next.onclick=function(){
            x++;
            if(x>2){
                x=0;
            }
            banner.src="../images/"+imgs[x]+".webp";
        }
    
        var y=2;
        last.onclick=function(){
            y--;
            if(y<0){
                y=2;
            }
            banner.src="../images/"+imgs[y]+".webp";
        }
    </script>
    </html>

一个向上翻，一个向下翻，

向上翻重置为0，为第一页

向下翻重置为2，为第三页（即最后一页）

就这里需要注意的

[20200923141457974.gif]: /images/20221123/0b1aa7e6b4de4825b7e90cbef8c88387.png

发表评论取消回复

表情：

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

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

相关阅读

相关 JS点击切换翻页

1.效果如下 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ib...

我就是我/ 2024年04月20日 09:17/ 0 赞/ 32 阅读

相关 JS实现--翻页（简单）

使用js实现简单的翻页效果上效果图 ![20200923141457974.gif][] 上代码 <!DOCTYPE html> <html lang

青旅半醒/ 2022年12月10日 02:24/ 0 赞/ 234 阅读

相关数据翻页--存储过程实现

CREATE PROCEDURE GET_PAGE_LIST @uid bigint, -- 用户ID @id bigint, -- 主键

ゞ浴缸里的玫瑰/ 2022年06月18日 00:06/ 0 赞/ 140 阅读

相关 jQuery实现翻页插件

推荐一个自己的博客：[JS -- 手动实现数组原生方法][JS --] 使用编辑器：vs code 主要用到的技术：css3 + jQuery 欢迎加QQ：

妖狐艹你老母/ 2022年05月26日 05:24/ 0 赞/ 163 阅读

相关小程序简单翻页效果

做了一个简单的翻页效果，可以参考修正一下，自己也可以优化代码。我写的是超级最初版。 <view class='main'> <view class='on

- 日理万妓/ 2022年05月08日 03:54/ 0 赞/ 739 阅读

相关 js图片轮播（翻页切换）

> 前面已经介绍了两种常见的图片轮播样式，今天将介绍一种更为常见的图片轮播形式，和淘宝的功能样式类似，这三种轮播基本上涵盖了常见网站图片轮播的所有类型，难度的话，个人认为淡入淡

傷城~/ 2022年04月23日 01:26/ 0 赞/ 224 阅读

相关 JS简单实现分页显示

> 完整代码源码可以在[这里][Link 1]下载 1.在 HTML文件建立列表目标节点和翻页器目标节点 <body>

冷不防/ 2022年04月05日 13:28/ 0 赞/ 366 阅读

相关 php实现信息上下翻页

这几天做项目因为数据太多，需要对信息进行上下翻页展示，就自己写了翻页的代码大致功能就是页面只显示几条信息，按上一页、下一页切换内容，当显示第一页时上一页和首页选项不可选，

缺乏、安全感/ 2022年01月23日 12:07/ 0 赞/ 200 阅读

相关 Django_实现翻页功能

Django提供了翻页器。用Django的Paginator类实现一、views模块导入Paginator类实现数据分页 ApiTest/apiviews.py

朱雀/ 2021年09月24日 13:14/ 0 赞/ 436 阅读

相关翻页

package mb.utils; import java.util.ArrayList; import java.util.List;

短命女/ 2021年09月23日 06:22/ 0 赞/ 377 阅读