js实现图片预览翻页

qq_小欢_1 2022/5/14 8:21:08

标签： jQuery Html/CSS

效果源码 <!DOCTYPE html> <html>  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <head><meta charset="utf-8" /><title></title><style …

效果

源码

<!DOCTYPE html>
<html>
<!--JQuery在线引用-->
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        #lv {
            margin: 0 auto;
            width: 1000px;
            height: 800px;
            background: rgb(150, 235, 180);
            text-align: center;
        }

        #img{
            width: 900px;
            height: 600px;
            margin-top: 60px;
        }

        #pre{
            position: absolute;
            right: 51%;
        }

        #next{
            position: absolute;
            right: 44%;
        }

        #info{
            font-size: x-large;
            padding-top: 30px;
        }
    </style>

</head>
<body>
    <div id="lv">
        <p id="info"></p>
        <img  id ='img' class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""  alt="" />
        <button id="pre">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
<script type="text/javascript">
    $(function(){
        //获取两个按钮
        var pre = document.getElementById("pre");
        var next = document.getElementById("next");
        //要切换图片就是要修改img 标签的src属性
        //获取img 标签，但是返回的是数组，所以你得操作的是数组中的对象
        var img = document.getElementsByTagName("img")[0];
        //创建一个数组用来保存图片的路径
        var imgArr = ["https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/560-300.jpg", "https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/0537AFF0-55BA-4826-9192-BAA8813F0CA7_1_105_c.jpeg", "https://picgo-1253652709.cos.ap-guangzhou.myqcloud.com/615A8F91-1822-445F-903E-5A87FA369977.jpeg"];
        var index = 0;
        var info = document.getElementById("info");
        img.src = imgArr[0];
        info.innerHTML = "总共" + imgArr.length + "照片，现在是第" + (index + 1) + "照片";
        pre.onclick = function () {
            if (--index < 0) {
                index = imgArr.length - 1;
            }
            img.src = imgArr[index];
            info.innerHTML = "总共" + imgArr.length + "照片，现在是第" + (index + 1) + "照片";

        };
        next.onclick = function () {
            if (++index > imgArr.length - 1) {
                index = 0;
            }
            img.src = imgArr[index];
            info.innerHTML = "总共" + imgArr.length + "照片，现在是" + (index + 1) + "照片";
        };
    })
</script>
</html>

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。
[js实现图片预览翻页]http://www.zyiz.net/tech/detail-320898.html

js实现图片预览翻页

效果

源码

关于找一找教程网

相关文章

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯