轮播图（自动轮播/动态添加图片数量的提示）

最新推荐文章于 2023-03-22 11:41:18 发布

Anna_sxy

最新推荐文章于 2023-03-22 11:41:18 发布

阅读量645

点赞数

文章标签： html js css

本文链接：https://blog.csdn.net/Victoriasxy/article/details/113575662

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
     
        ul, li, ol {
            list-style: none;
        }
     
        .slider {
            width: 590px;
            height: 470px;
            border: 1px solid #eee;
            margin: 100px auto;
            padding: 5px;
            position: relative;
        }
     
        .inner {
            width: 590px;
            height: 470px;
            background: pink;
            position: relative;
            overflow: hidden;
        }
     
        .inner img {
            display: block;
            width: 590px;
            height: 470px;
        }
     
        .inner ul {
            width: 800%;
            position: absolute;
            top: 0;
            left: 0;
        }
     
        .inner li {
            float: left;
        }
     
        .slider ol {
            position: absolute;
            left: 50%;
            margin-left: -80px;
            bottom: 10px;
        }
     
        .slider ol li {
            float: left;
            width: 18px;
            height: 18px;
            background: #fff;
            margin-right: 10px;
            text-align: center;
            line-height: 18px;
        }
     
        .slider ol li.current {
            background: coral;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="slider" id="slider">
        <div class="inner">
            <ul>
                <li><a href="#"><img src="../../images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="../../images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="../../images/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="../../images/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="../../images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="../../images/2.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
</body>
<script>
    // 获得元素
    var slider = document.getElementById("slider");
    var ul = slider.children[0].children[0];
    var ullis = ul.children;
 
    // 1、动态复制最后一张图
    ul.appendChild(ullis[0].cloneNode(true));
 
    // 2、动态生成小圆点
    var ol = document.createElement("ol");
    slider.appendChild(ol);
    for (var i = 0; i < ullis.length - 1; i++) {
        var li = document.createElement("li");
        li.innerHTML = i + 1;
        ol.appendChild(li);
    }
    ol.children[0].setAttribute("class", "current");
 
    // 3、鼠标经过小圆点  圆点事件
    var ollis = ol.children;
    for (var i = 0; i < ollis.length; i++) {
        ollis[i].index = i; // 自定义属性
        ollis[i].onmouseover = function () {
            for (var j = 0; j < ollis.length; j++) { // 去掉所有小圆点的class
                ollis[j].removeAttribute("class");
            }
            ollis[this.index].setAttribute("class", "current"); // 保留当前小圆点的class
 
            // 图片动画
            animate(ul, -this.index * ullis[0].offsetWidth);
 
            key = point = this.index; // 从当前开始动画
        }
    }
 
    // 缓动动画函数
    var leader = 0;//缓动动画变量
    function animate(obj, target) {
        clearInterval(obj.timer); // 清除定时器
        /*定时任务，缓动轮播 30毫秒到target位置*/
        obj.timer = setInterval(function () {
            leader = leader + (target - leader) / 10;//缓动动画公式
            obj.style.left = leader + "px";
        }, 10);
    }
 
    // 4、轮播图定时器
    var timer = null;
    timer = setInterval(autoplay, 3000);
    var key = 0; // 控制播放张数
    var point = 0; // 控制小圆点
    function autoplay() {
        // 播放张数
        key++;
        if (key > ullis.length - 1) { // 判断是否播放完
            leader = 0; // 迅速跳回
            key = 1; // 下次播放第二张
        }
        animate(ul, -key * ullis[0].offsetWidth);
 
        // 小圆点
        point++;
        if (point > ollis.length - 1) {
            point = 0;
        }
        for (var i = 0; i < ollis.length; i++) { // 先清除所有的
            ollis[i].removeAttribute("class");
        }
        ollis[point].setAttribute("class", "current") // 再保留现在的
    }
 
    // 5、鼠标经过事件
    slider.onmouseover = function () {
        clearInterval(timer);
    }
    slider.onmouseout = function () {
        timer = setInterval(autoplay, 3000);
    }
</script>
</html>

Anna_sxy

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
轮播图（自动轮播/动态添加图片数量的提示）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m.
复制链接

扫一扫