练习：js实现简易的轮播图效果

最新推荐文章于 2022-04-08 12:09:08 发布

越努力越

最新推荐文章于 2022-04-08 12:09:08 发布

阅读量297

点赞数 1

分类专栏： JavaScript 文章标签： javascript html

本文链接：https://blog.csdn.net/weixin_45353679/article/details/104447639

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

制作简易的轮播图效果

<!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;
        }
        
        #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="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 = imgArr.length - 1;
                }
                showData();
            }
            //右箭头事件绑定
        $('next').onclick = function() {
                index++;
                if (index === imgArr.length && flag) {
                    index = 0;
                }
                showData();
            }
            //定时器 实现轮播
        setInterval(function() {
            index++;
            if (index === imgArr.length && flag) {
                index = 0;
            }
            showData();
        }, 3000);
    </script>
</body>

</html>

在这里插入图片描述

越努力越

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习：js实现简易的轮播图效果

制作简易的轮播图效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
复制链接

扫一扫

专栏目录