网页html、css、js轮播图均可借用

clyxgy

已于 2024-03-12 20:53:14 修改

阅读量306

点赞数 6

文章标签： html css javascript

于 2024-03-12 20:33:36 首次发布

本文链接：https://blog.csdn.net/clyxgy/article/details/136662424

版权

这篇文章详细描述了一个使用HTML、CSS和JavaScript构建的轮播图组件，包括图片布局、鼠标悬停显示箭头、自动切换、小圆点导航以及平滑滚动功能。

摘要由CSDN通过智能技术生成

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
        <link rel="stylesheet" href="index.css">
        <script src="index.js"></script>
        <script src="index1.js"></script>
        
</head>
<body>
        <div class="qw">
            <div class="tu"><img src="./图片/S_68$0M$Y`1$%FU5SK3KDKB.png" alt="" class="gg"></div>
            <div class="banners">
                <ul class="images">
                    <!-- 核心滚动区 -->

                    <li>
                        <a href="#"><img src="./img/11.avif" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./img/12.avif" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./img/13.webp" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./img/14.webp" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./img/15.webp" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./img/16.webp" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="./img/17.avif" alt=""></a>
                    </li>
                </ul>
                <!-- 左箭头 -->
                <a href="javascript:;" class="prev"> &lt;</a>
                <!-- 右箭头 -->
                <a href="javascript:;" class="next"> &gt;</a>
                <!-- 小圆点 -->
                <ul class="dots">
                    <!-- li 可用js动态生成-->
                </ul>
        
            </div>
        </div>
</body>
</html>

css部分

* {
    margin: 0;
    padding: 0;
}

.images li {
    list-style: none;
}

/* 外层盒子样式,左右箭头和小圆点都要采用绝对定位，所以其父盒子要采用相对定位*/
.banners {
    position: relative;
    overflow: hidden;
    width: 750px;
    height: 280px;
    right: 150px;
    margin: 0px auto;
}



/*滚动区 包裹所有图片的盒子 宽度要足够宽可以放下所有的图片*/
.images {
    position: absolute;
    top: 0;
    left: 0;
    width: 700%;
}

/* 对图片使用浮动 使其排列在一行*/
.images li {
    float: left;
}

/* 图片大小会撑大盒子,设置图片大小 */
.banners img {
    width: 750px;
    height: 280px;
}

/*左右箭头相同样式*/
.prev,
.next {
    display: none;
    position: absolute;
    /* 绝对定位的盒子垂直居中 */
    top: 50%;
    margin-top: -15px;
    width: 20px;
    height: 30px;
    background: rgba(0, 0, 0, .3);
    text-align: center;
    line-height: 30px;
    color: #fff;
    text-decoration: none;
}

/*左箭头靠左定位*/
.prev {
    left: 0;
    /* 设置圆角 */
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

/*右箭头靠右定位*/
.next {
    right: 0;
    /* 设置圆角 */
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

/* 小圆点外层盒子的样式 */
.dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -35px;
    height: 13px;
    background: rgba(255, 255, 255, .3);
    border-radius: 7px;
}

/* 小圆点样式*/
.dots li {
    float: left;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    margin: 3px;
}

/* 小圆点被点击的样式 */
.dots .active {
    background-color: #ff5000;
}

js部分（1）

window.addEventListener('load', function () {
    //1. 获取元素
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var banners = document.querySelector('.banners')

    //2. 鼠标经过，显示左右按钮
    banners.addEventListener('mouseenter', function () {
        prev.style.display = 'block';
        next.style.display = 'block';
        clearInterval(timer);
        timer = null;//清除计时器
    });
    //3. 鼠标离开，隐藏左右按钮
    banners.addEventListener('mouseleave', function () {
        prev.style.display = 'none';
        next.style.display = 'none';
        timer = setInterval(function () {
            // 轮播图自动切换 相当于点击右箭头
            next.click();
        }, 2000);
    });
    // 4. 动态生成小圆圈 有几张图片，就生成几个小圆圈
    var images = document.querySelector('.images');
    var dots = document.querySelector('.dots');
    var banners_width = banners.offsetWidth;
    for (var i = 0; i < images.children.length; i++) {
        //创建一个小li
        var li = document.createElement('li');
        //记录当前小圆圈的索引号 通过创建自定义属性来做
        li.setAttribute('index', i);
        dots.appendChild(li);
        //5. 小圆圈的排他思想 可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click', function () {
            for (var i = 0; i < dots.children.length; i++) {
                dots.children[i].className = '';
            }
            this.className = 'active';
            // 6. 点击小圆圈，移动图片，本质移动的是ul
            //ul 的移动距离 就是小圆圈的索引号 * 图片的宽度 注意是负值
            // 当我们点击了某个小li 就拿到它的index属性
            var index = this.getAttribute('index');
            //当我们点击了某个小li 就要把这个小li 的index给num
            num = index;
            circle = index;
            animate(focus, -index * banners_width);
        })
    }
    //把dots 里面的第一个小li设置类名为 active
    dots.children[0].className = 'active';
    // 实现滑动到最后一张照片时 可以平滑地过渡到第一张，克隆第一张图片 放在ul最后面，在其后克隆小圆点不会多
    var first = images.children[0].cloneNode(true);
    images.appendChild(first);

    // 点击右侧按钮，图片滚动一张
    var num = 0;
    //circle 控制小圆圈的播放
    var circle = 0;
    next.addEventListener('click', function () {
        // 如果走到了最后复制的一张图片，此时的ul要快速复原 left值改为零
        if (num == images.children.length - 1) {
            images.style.left = 0;
            num = 0;
        }
        num++;
        animate(images, -num * banners_width);
        // 7. 点击右侧按钮，小圆圈跟随一起变化
        circle++;
        if (circle == dots.children.length) {
            circle = 0;
        }
        circleChange();
    })
    //左侧按钮点击事件
    prev.addEventListener('click', function () {
        // 如果走到了最后复制的一张图片，此时的ul要快速复原 left值改为零
        if (num == 0) {
            num = images.children.length - 1;
            images.style.left = -num * banners_width + 'px';
        }
        num--;
        animate(images, -num * banners_width)
        // 8. 点击右侧按钮，小圆圈跟随一起变化
        circle--;
        circle = circle < 0 ? dots.children.length - 1 : circle;
        //调用函数
        circleChange();
    })
    function circleChange() {
        for (var i = 0; i < dots.children.length; i++) {
            dots.children[i].className = '';
        }
        dots.children[circle].className = 'active';
    }
    var timer = setInterval(function () {
        //手动调用点击事件
        next.click();
    }, 2000);

})

js部分（2）定时器

function animate(obj, target, callback) {
    //让元素只有一个定时器在执行，需要清除以前的定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            //停止动画 本质是停止定时器
            clearInterval(obj.timer)
            //回调函数写到定时器结束位置
            if (callback) {
                callback();
            }

        }
        //把每次加1这个步长值改为一个慢慢变小的值
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}