原生JS实现透明度轮播效果

最新推荐文章于 2022-05-14 14:13:32 发布

旅行中的伊蕾娜

最新推荐文章于 2022-05-14 14:13:32 发布

阅读量340

点赞数 2

分类专栏：原生JS案例文章标签： javascript css3 html5

本文链接：https://blog.csdn.net/zzz18789/article/details/118441754

版权

原生JS案例专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原生JS实现透明度轮播效果

以透明度变换的方式切换轮播图，具有自动轮播、点击左右按钮切换、点击下方圆点切换功能
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="animation.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .slider {
            width: 500px;
            height: 300px;
            border: 4px solid crimson;
            position: relative;
            margin: 50px auto;
        }

        .slider .list .item {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        .slider .list .item:first-of-type {
            opacity: 1;
        }

        .slider .list .item img {
            width: 500px;
            height: 300px;
            display: block;
        }

        .slider .next, .slider .prev {
            position: absolute;
            top: 110px;
            background-color: white;
            opacity: .9;
            width: 30px;
            height: 80px;
            cursor: pointer;
            border: none;
        }

        .slider .next {
            right: 0;
        }

        .slider .pagination {
            position: relative;
            top: 260px;
            left: 190px;
        }

        .slider .pagination .bullet {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            margin-left: 5px;
            float: left;
            border: 3px solid white;
            cursor: pointer;

        }

        .slider .pagination .bullet.focus {
            background-color: black;
        }
    </style>
</head>
<body>
<div class="slider">
    <ul class="list">
        <li class="item"><img src="img/1.jpg" alt=""></li>
        <li class="item"><img src="img/2.jpg" alt=""></li>
        <li class="item"><img src="img/3.jpg" alt=""></li>
        <li class="item"><img src="img/4.jpg" alt=""></li>
    </ul>
    <button class="prev"> <</button>
    <button class="next"> ></button>
    <ul class="pagination">
        <li class="bullet focus"></li>
        <li class="bullet"></li>
        <li class="bullet"></li>
        <li class="bullet"></li>
    </ul>
</div>

<script type="text/javascript">
    (function () {
        var prevIndex, nextIndex; //上一张和下一张索引
        var len; //img标签个数
        var id; //自动轮播定时器的变量名
        init()

        //初始化函数
        function init() {
            prevIndex = nextIndex = 0; //初始索引0
            len = document.querySelectorAll('.list .item').length; //获取img标签的个数

            document.querySelector('.prev').onclick = function () { //上一张按钮点击事件函数
                slidePrev();
            }
            document.querySelector('.next').onclick = function () { //下一张按钮点击事件函数
                slideNext();
            }
            var bullets = document.querySelectorAll('.slider .pagination .bullet'); //获取所有的圆点
            //遍历，给每个圆点添加img所对应的索引值
            for (var i = 0; i < bullets.length; i++) {
                bullets[i].index = i; //给每个圆点添加对应的索引值
                /*
                点击对应索引的圆点后，先把当前索引nextIndex给prevIndex，然后把点击的圆点的索引值（this.index）赋值给nextIndex
                最后调用函数传入对应的值
                （如：当前在第二张，索引为1，点击第四张，索引为3，此时prevIndex为1，nextIndex为3，
                调用函数传入值后，索引1（第二张）的img透明度变为0，索引3（第四张）的img透明度变为1）
                */
                bullets[i].onclick = function () {
                    prevIndex = nextIndex;
                    nextIndex = this.index;
                    slideTo(prevIndex, nextIndex);
                }
            }

            var slider = document.querySelector('.slider'); //获取div
            slider.onmouseover = function () { //鼠标移动到div上时，停止轮播
                stop();
            }
            slider.onmouseout = function () { //鼠标移开时，开始轮播
                auto();
            }
            auto(); //默认开始轮播
        }

        //切换上一张函数
        function slidePrev() {
            /*
             先把nextIndex保存到prevIndex
             例如当前为第二张图片（索引值为1），点击上一张后，先把1赋值给prevIndex，然后nextIndex-1.变为0
             此时调用slideTo函数，传入1和0，把li下索引值为1的img透明度更改为0，索引值为0的透明度更改为1，达到图片切换的效果
            */
            prevIndex = nextIndex;
            nextIndex--;
            //如果是第一张，则索引值为0，切换上一张时会变成-1，如为-1，就把nextIndex的索引值改为img个数的最大值-1
            if (nextIndex === -1) {
                nextIndex = len - 1;
            }
            slideTo(prevIndex, nextIndex);
        }

        //切换下一张函数
        function slideNext() {
            prevIndex = nextIndex;
            nextIndex++;
            if (nextIndex === len) {
                nextIndex = 0;
            }
            slideTo(prevIndex, nextIndex);
        }

        //执行轮播函数
        function slideTo(prev, next) {
            var lis = document.querySelectorAll('.list .item'); //获取class为item的所有的li
            var bullets = document.querySelectorAll('.slider .pagination .bullet'); //获取所有的圆点
            //下面两句是设置焦点（目前显示的第几张图片对应索引的圆点就显示背景色）
            bullets[prev].className = 'bullet'; //把传入的上一个圆点的classname改回bullet（没有背景色的css）
            bullets[next].className = 'bullet focus'; //传入的当前圆点的classname改成bullet focus（设置了背景色的css）
            animate(lis[prev], {opacity: 0}); //把对应索引的li中的img透明度更改为0
            animate(lis[next], {opacity: 100}); //把对应索引的li中的img透明度更改为100
        }

        //自动轮播函数
        function auto() {
            clearInterval(id); //每次使用定时器前先关闭上一次的定时器，否则每次启动定时器都会增加一个定时器
            id = setInterval(function () {
                slideNext(); //调用下一张切换函数
            }, 2000)
        }

        //停止轮播函数
        function stop() {
            clearInterval(id);
        }
    })()
</script>
</body>
</html>

旅行中的伊蕾娜

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JS实现透明度轮播效果

js实现透明度轮播效果以透明度变换的方式切换轮播图，具有自动轮播、点击左右按钮切换、点击下方圆点切换功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="animation.js"></script> <style type="
复制链接

扫一扫