js实现一个功能齐全的渐变轮播图

最新推荐文章于 2024-05-07 21:04:09 发布

努力敲代码ing

最新推荐文章于 2024-05-07 21:04:09 发布

阅读量278

点赞数

分类专栏： js 文章标签： javascript css css3 html 前端

本文链接：https://blog.youkuaiyun.com/weixin_43430432/article/details/129899352

版权

js 专栏收录该内容

4 篇文章

订阅专栏

该文章提供了一个使用HTML、CSS和JavaScript实现的图片轮播功能的代码示例。功能包括自动切换、鼠标悬停控制、小圆点导航以及左右箭头切换图片。代码中详细定义了元素样式和交互逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新手练习，欢迎大家评论交流。

实现功能有

自动切换下一张
来回循环
鼠标移入小圆点可以控制图片变换
鼠标移出小圆点后图片接着这一张向下循环
鼠标移入图片图片停止变换
左右箭头控制图片变换
效果如下图

在这里插入图片描述
html如下

<div class="box">
        <ul>
            <li class="o1">
                <img src="img/1.png">
            </li>
            <li>
                <img src="img/2.png">
            </li>
            <li>
                <img src="img/3.png">
            </li>
            <li>
                <img src="img/4.png">
            </li>
            <li>
                <img src="img/7044e956gy1fho8pu4rexj21kw0qytl1.jpg">
            </li>
            <li>
                <img src="img/Assassin's Creed  Unity Screenshot 2020.06.17 - 15.45.57.15.png">
            </li>
            <li>
                <img src="img/ba78b17cf1dbea5a.jpg">
            </li>
            <li>
                <img src="img/Death Stranding 2022_12_30 22_27_52.png">
            </li>
            <li>
                <img src="img/Detroit  Become Human Screenshot 2019.12.20 - 19.35.18.37.png">
            </li>
            <li>
                <img src="img/LesMiz_UK_Tour_Trailer.jpg">
            </li>
            <li>
                <img
                    src="img/src=http___c-ssl.duitang.com_uploads_blog_202012_21_20201221012411_728ec.jpg&refer=http___c-ssl.duitang.jpg">
            </li>
            <li>
                <img src="img/u=3070983779,2915508390&fm=253&fmt=auto&app=138&f=JPEG.jpg">
            </li>
            <li>
                <img src="img/u=846459719,479291303&fm=253&fmt=auto&app=120&f=JPEG.jpg">
            </li>
            <li>
                <img src="img/屏幕截图 2022-08-02 004152.png">
            </li>
        </ul>
        <div class="doc">
            <span class="on"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <button class="right">></button>
        <button class="left"><</button>
    </div>

css如下

* {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .box,
        img {
            width: 670px;
            height: 400px;
        }

        .box img {
            object-fit: cover;
        }

        .box {
            margin: auto;
            position: relative;
        }

        .box li {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: 0.5s;
        }

        .box .o1 {
            opacity: 1;
        }

        .doc {
            position: absolute;
            bottom: 20px;
            left: 35%;
        }

        .doc .on {
            background-color: brown;
        }

        .doc span {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #fff;
            cursor: pointer;
        }

        button {
            width: 30px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.8);
            line-height: 50px;
            text-align: center;
            position: absolute;
            top: 50%;
            margin-top: -25px;
            border: none;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
        }

        .right {
            right: 0;
        }

        .left {
            left: 0;
        }

js如下

<script>
        // 获取标签
        var li = document.getElementsByTagName('li');
        var span = document.getElementsByTagName('span');
        var btn = document.getElementsByTagName('button');
        var box = document.getElementsByClassName('box')[0];
        // 让图片自己循环起来，定时器setInterval
        var index = 0;  //设一个变量存当前li的下标
        var timer; //存一个变量放定时器
        // 用第二种方式调用 搞一个函数
        function auto() {
            index++;
            // 图片到最后一个让下标成0
            if (index >= li.length) {
                index = 0;
            }
            // 清除图片和span的，排他
            for (var i = 0; i < li.length; i++) {
                li[i].className = '';
                span[i].className = '';
            }
            li[index].className = 'o1';
            span[index].className = 'on';
        }

        // 图片轮播调用
        timer = setInterval(auto, 2000);

        // 鼠标移入box停止定时器
        box.onmouseover = function () {
            clearInterval(timer);
        }

        // 鼠标移出开启定时器 再调用一次
        box.onmouseout = function () {
            timer = setInterval(auto, 2000);
        }

        // 给圆点添加鼠标移入切换对应图片事件 颜色变换
        for (var i = 0; i < span.length; i++) {
            span[i].index = i;  //添加一个自定义属性
            span[i].onmouseover = function () {
                index = this.index;  //鼠标移入切换对应事件后，自动轮播从你选的图片开始往后轮
                // 清除
                for (var i = 0; i < li.length; i++) {
                    li[i].className = '';
                    span[i].className = '';
                }
                // 变换
                span[this.index].className = 'on';
                li[this.index].className = 'o1';
            }
        }

        // 给两个箭头添加点击切换图片功能
        // btn0是下一张
        btn[0].onclick = function(){
            // 清除
            for (var i = 0; i < li.length; i++) {
                li[i].className = '';
                span[i].className = '';
            }
            // 判断最后一张索引第一张
            if(index == li.length-1){ //最后一张点一下到第一张
                index = 0;
            } else{
                index++;
            }
            li[index].className = 'o1';
            span[index].className = 'on';
        }
        // btn1是上一张
        btn[1].onclick = function(){
            // 清除
            for (var i = 0; i < li.length; i++) {
                li[i].className = '';
                span[i].className = '';
            }
            // 判断第一张索引最后一张
            if(index == 0){ //第一张点一下到最后一张
                index = li.length - 1;
            } else{
                index--;
            }
            li[index].className = 'o1';
            span[index].className = 'on';

        }



    </script>