首页 > 其他分享> > 练习：js实现点击切换图片

练习：js实现点击切换图片

2020-02-22 18:03:42 作者：互联网

点击切换图片，控制是否可以循环切换

<!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>
        a {
            text-decoration: none;
            color: white;
        }
        
        #control {
            width: 590px;
            height: 50px;
            border: 10px solid black;
            /* border-bottom-width: 0px; */
            background-color: gray;
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
        }
        
        #container {
            width: 590px;
            height: 470px;
            margin: 0 auto;
            position: relative;
            border: 10px solid black;
            background-color: grey;
            margin-top: 10px;
        }
        
        #pre,
        #next {
            position: absolute;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 22px;
            top: 220px;
            background-color: black;
            opacity: 0.5;
        }
        
        #pre {
            left: 0;
        }
        
        #next {
            right: 0;
        }
        
        #order,
        #info {
            /* width: 590px; */
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: black;
            opacity: 0.5;
            position: absolute;
            color: white;
        }
        
        #order {
            top: 0;
        }
        
        #info {
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="control">
        <button id="round">循环播放</button>
        <button id="single">顺序播放</button>
    </div>
    <div id="container">
        <a href="javascript:" id="pre">&lt;</a>
        <a href="javascript:" id="next">&gt;</a>
        <div id="order">图片正在加载...</div>
        <div id="info">图片正在加载...</div>
        <img src="" alt="" id="picture">
    </div>

    <script>
        //定义图片数组
        let imgArr = ['1.jpg', '2.jpg', '3.jpg', '4.jpg'];
        //定义info数组
        let infoArr = ['图片一', '图片二', '图片三', '图片四'];
        var index = 0; //数组索引
        let flag = true; //假定true为顺序播放

        function $(id) {
            return document.getElementById(id);
        }
        //定义函数，显示信息
        function showData() {
            $('order').innerHTML = (index + 1) + '/' + imgArr.length;
            $('info').innerHTML = infoArr[index];
            $('picture').src = imgArr[index];
        }
        showData();
        //左箭头事件绑定
        $('pre').onclick = function() {
                index--;
                if (index === -1 && flag) {
                    index = 0;
                    alert("已经是第一张图片了！");
                } else if (index === -1 && !flag) {
                    index = imgArr.length - 1;
                }
                showData();
            }
            //右箭头事件绑定
        $('next').onclick = function() {
                index++;
                if (index === imgArr.length && flag) {
                    index = imgArr.length - 1;
                    alert("已经是最后一张了！");
                } else if (index === imgArr.length && !flag) {
                    index = 0;
                }
                showData();
            }
            //循环播放事件绑定
        $('round').onclick = function() {
            flag = false;
            alert("现在开始循环播放！");
        }
        $('single').onclick = function() {
            flag = true;
            alert("现在开始顺序播放！");
        }
    </script>
</body>

</html>

效果图
在这里插入图片描述

GrowingRick 发布了24 篇原创文章 · 获赞 1 · 访问量 466 私信关注

标签：index,color,练习,flag,height,width,点击,js,imgArr
来源： https://blog.csdn.net/weixin_45353679/article/details/104447617