轮播图制作(1)

最新推荐文章于 2022-04-22 11:36:00 发布

黑白两客

最新推荐文章于 2022-04-22 11:36:00 发布

阅读量146

点赞数

分类专栏：前端网页小项目文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44694682/article/details/104786683

版权

前端网页小项目专栏收录该内容

74 篇文章 3 订阅

订阅专栏

轮播图制作

<body>
    <div>
        <img src="img/1.jpg" class="imgs" alt="">
        <a href="#" class="left"><</a> //此处的箭头也可以用图标做出来
        <a href="#" class="right">></a>
        <ul>
            <li class="col"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
    </div>
</body>

 <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        div {
            width: 500px;
            height: 300px;
            background-color: cadetblue;
            margin: 100px auto;
            position: relative;
            cursor: pointer;
        }
        
        div:hover a {
            display: block;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        div ul {
            width: 100px;
            height: 20px;
            position: absolute;
            display: flex;
            justify-content: space-around;
            bottom: 10px;
            left: 50%;
            border-radius: 10px;
            transform: translateX(-50%);
            /* background-color: rgba(155, 154, 154, 0.7); */
        }
        
        div ul li {
            float: left;
            list-style-type: none;
            width: 10px;
            height: 10px;
            margin-top: 5px;
            background-color: #fff;
            border-radius: 50%;
        }
        
        a {
            display: inline-block;
            display: none;
            width: 30px;
            height: 50px;
            text-decoration: none;
            color: #fff;
            font-size: 30px;
            font-weight: 200;
            line-height: 50px;
            text-align: center;
            background-color: rgba(171, 172, 170, 0.5);
        }
        
        .left {
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .right {
            position: absolute;
            right: 0px;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .col {
            background-color: rgb(61, 115, 216);
        }
    </style>

<script>
    window.onload = function() {
        var div = document.querySelector('div');
        var img = document.querySelector('.imgs');
        var la = document.querySelector('.left');
        var ra = document.querySelector('.right');
        var li = document.querySelectorAll('li');
        var i = 1;
        var timer = null;


        function imgs() {
            i++;
            if (i > 6) i = 1;
            img.src = "img/" + i + ".jpg";
            for (var j = 0; j < li.length; j++) {
                li[j].className = '';
                li[i - 1].className = 'col';
            }
        }
        timer = setInterval(imgs, 2500);

        // 移入暂停
        div.addEventListener('mouseover', function() {
            clearInterval(timer);
        });
        div.addEventListener('mouseout', function() {
            timer = setInterval(imgs, 2500);
        });

        // 左右
        ra.addEventListener('click', imgs);
        la.addEventListener('click', function() {
            i--;
            if (i < 1) i = 6;
            img.src = "img/" + i + ".jpg";
            for (var j = 0; j < li.length; j++) {
                li[j].className = '';
                li[i - 1].className = 'col';
            }
        });
        // 小圆点
        for (var j = 0; j < li.length; j++) {
            li[j].index = j; //添加下标
            li[j].addEventListener('click', function() {
                for (var k = 0; k < li.length; k++) {
                    li[k].className = '';
                }
                console.log(this.index);
                li[this.index].className = 'col';
                i = this.index + 1;
                img.src = "img/" + i + ".jpg";
            })
        }
    }
</script>

实现的效果如下：

在这里插入图片描述

images

在这里插入图片描述

黑白两客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
轮播图制作(1)

轮播图制作<body> <div> <img src="img/1.jpg" class="imgs" alt=""> <a href="#" class="left"><</a> //此处的箭头也可以用图标做出来 <a href="#" class="right"&g...
复制链接

扫一扫