js点击上下按钮切换图片

最新推荐文章于 2024-05-02 18:12:22 发布

weixin_34387468

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量831

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cd4f0ecf265da03705fd215

版权

<!DOCTYPE html>
<html>

<head>
    &emsp;&emsp;
    <meta charset="utf-8">
    &emsp;&emsp;<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            text-align: center;
            /*将box里的内容居中显示*/
        }

        .btn {
            display: inline-blocki;
            /*让a标签变成行内块级元素*/
            height: 30px;
            line-height: 30px;
            border: 1px solid #ccc;
            text-decoration: none;
            color: #333;
            padding: 5px;
            font-size: 12px;
        }

        .btn:active {
            background-color: #666;
            color: white;
        }
    </style>
</head>

<body>
    &emsp;&emsp;<div class="box">
        &emsp;&emsp;&emsp;&emsp;<img src="http://m.beijing.xuefu.com/beijing/img/mcd-index-002xa.png" alt="pic" id="img">
        &emsp;&emsp;&emsp;&emsp;<p>
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<a href="javascript:;" class="btn" data-control="last">上一页</a>
            &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<a href="javascript:;" class="btn" data-control="next">下一页</a>
            &emsp;&emsp;&emsp;&emsp;</p>
        &emsp;&emsp;</div>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        var imgs = [//定义数组用来存储图片的路径
            'http://m.beijing.xuefu.com/beijing/img/mcd-index-002xa.png',
            'http://beijing.xuefu.com/g-img/index-banner/index-mwh-bn4.png',
            'http://beijing.xuefu.com/g-img/index-banner/index-mnj-sj4.png'
        ];
        var index = 0;//设置第一张图片的索引值为0
        var len = imgs.length;//获取存储图片数组的长度
        $('.btn').on('click', function () {
            if ($(this).data('control') === "last") {

                index = Math.max(0, --index);//如果index的值小于0，使index为0
            } else
                index = Math.min(len - 1, ++index);//如果index大于了数组长度 ，使index等于数组长度减一的值
            document.title = (index + 1) + '/' + len;//改变标题内容
            $('#img').attr('src', imgs[index]);//动态改变图片的路径
        });
    </script>
</body>

</html>
复制代码

weixin_34387468

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js点击上下按钮切换图片

<!DOCTYPE html><html><head> &emsp;&emsp; <meta charset="utf-8"> &emsp;&emsp;<style type="text/css"> * { margin: 0; ...
复制链接

扫一扫