js 轮播图（透明度）

最新推荐文章于 2022-04-19 22:05:21 发布

哈哈绝

最新推荐文章于 2022-04-19 22:05:21 发布

阅读量2.5k

点赞数 6

分类专栏： js 学习笔记文章标签： js 轮播图

本文链接：https://blog.csdn.net/qq_41194704/article/details/102729024

版权

学习笔记同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

28 篇文章 1 订阅

订阅专栏

js 轮播图（透明度）

用透明度的方式来实现轮播图

先说下思路，我们首先应该考虑下页面的结构。
第一，我们在做网站的时候，不可能一个页面都是轮播图，所以我们首先需要一个大的盒子，来把轮播图包起来，这里我用的是div
第二，因为使用透明度做的，所以轮播图的切换方式也是透明度，也就是说一个隐藏，一个显示，那么也就意味着，这些用来做轮播图的图片是在同一个位置上，一个压着一个的。这个效果可以用position：absolute来实现，这些图片需要一个共同的祖先来设置position：relative，所以我用的是ul>li>a>img
第三，怎么样让图片逐个显示，首先我们可以先将图片全部隐藏，然后在逐个显示，需要注意层级的问题，这个问题可以用z-index解决
最后，剩下的小点和前进、后退，可以直接用定位，定到上方。

然后，我们来考虑下思路

我们需要创建一个选中样式，选中样式的作用就是，将图片显示出来。

然后在js中要做的就是首先定义一个函数，这个函数的功能是，我们往里面传递图片的索引，函数根据索引，找到对应的元素，将选中样式赋值给他

其他的效果，就是参数的不同了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
    }
    div {
        width: 500px;
        height: 313px;
        border: 1px solid black;
        position: relative;
    }
    .carousel li {
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity .3s;//切换图片时的过度效果
    }
    .carousel li a img {
        width: 500px;
        height: 313px;
    }
   .carousel .selection {//显示的图片需要的类
        opacity: 1;
        z-index: 10;
    }
    .prev,
    .next {//左右箭头的样式
        width: 50px;
        height: 50px;
        font-size: 30px;
        text-align: center;
        line-height: 50px;
        background: white;
        opacity: .3;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 101;
        cursor: pointer;
        user-select: none;
    }
    .prev:hover,
    .next:hover {
        opacity: .8;
    }
    .prev {
        left: 20px;
    }
    .next {
        right: 20px
    }
    .circle {
        position: absolute;
        height: 8px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 200;
        bottom: 20px;
    }
    .circle li {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(180, 180, 180, .3);
        border: 1px solid transparent;
        float: left;
        margin-left: 10px;
        cursor: pointer;
    }
    .circle .current {//选中小点的样式
        background: rgba(180, 180, 180, .8);
        border: 1px solid rgb(50, 50, 50);
    }
</style>

<body>
    <div>
        <ul class="carousel">
            <li class="selection"><a href="#1"><img src="1.jpg" alt=""></a></li>
            <li><a href="#2"><img src="2.jpg" alt=""></a></li>
            <li><a href="#3"><img src="3.jpg" alt=""></a></li>
            <li><a href="#4"><img src="4.jpg" alt=""></a></li>
            <li><a href="#5"><img src="5.jpg" alt=""></a></li>
        </ul>
        <div class="prev">< </div> //左箭头
        <div class="next">></div>//右箭头
        <ul class="circle">//全部的小点
            <li class="current"></li>//小点
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var currentIndex = 0;//当前图片的索引，我希望从0开始
        var id;
        var len = document.querySelector('.carousel').childElementCount;//得到ul下面li的个数
        function carousel(index) {//建一个函数，用来提供一个索引然后切换到索引对应的图片
            if (currentIndex === len) //判断一下，当前图片索引是否等于li的个数，因为当前索引是从0开始的，所以总数的值是没有的
                currentIndex = index = 0
            }
            if (currentIndex < 0) {
                currentIndex = index = 4
            }
            document.querySelector('.current').className = '';//将页面上有选中样式的小点的样式清空
            document.querySelector('.circle li:nth-child(' + (index + 1) + ')').className = 'current'//根据索引来控制那个小点是显示状态
            document.querySelector('.selection').className = '';//将页面上有选中样式的图片的样式清空
            document.querySelector('.carousel li:nth-child(' + (index + 1) + ')').className = 'selection'//根据索引来控制那张图片显示
        }
        function prev() {//后退函数
            currentIndex--;//当前索引减1
            carousel(currentIndex) //调用carousel函数
        }
        function next() {//前进函数
            currentIndex++;//当前索引加1
            carousel(currentIndex) //调用carousel函数
        }
        var lis = document.querySelectorAll('.circle li');//得到页面上的所有小点
        for (var i = 0; i < lis.length; i++) {//for循环遍历
            lis[i].index = i;//将i值先保存一下
            lis[i].onclick = function () {//
                currentIndex = this.index
                carousel(currentIndex);
            }
        }
        function auto() {//自动切换
            id = setInterval(next, 1000)//间隔函数，每一秒调用一次前进函数
        }
        function stop() {
            clearInterval(id)
        }
        auto();
        document.querySelector('.prev').onclick = prev//后退按钮的点击事件
        document.querySelector('.next').onclick = next//前进按钮的点击事件
        document.querySelector('div').onmouseover = stop//div的鼠标移入事件
        document.querySelector('div').onmouseout = auto//div的鼠标移出事件
    </script>
</body>

</html>