web（轮播图）

最新推荐文章于 2024-07-30 16:49:30 发布

Ajiang421

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量146

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/Ajiang421/article/details/138229732

版权

示例：

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="./轮播图.css">
    <script src="./轮播图.js"></script>
    <script src="./课堂练习.js"></script>
</head>
<body>
    <div class="banners">
        <ul class="images">
             <!-- 核心滚动区 -->
            <li>
                <a href="#"><img src="../3a96684737e8dfdfb7.jpg" alt=""></a>
            </li>           
            <li>
                <a href="#"><img src="../9ad9dccaa829c223a9.jpg" alt=""></a>
            </li>       
            <li>
                <a href="#"><img src="../b1dfd4a4ff64e62b1e.jpg" alt=""></a>
            </li>       
            <li>
                <a href="#"><img src="../e198370fc1a8778393.jpg" 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>
</body>
</html>

css:

/* 1. 样式重置 */
* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}

/* 外层盒子样式,左右箭头和小圆点都要采用绝对定位，所以其父盒子要采用相对定位*/
.banners {
    position: relative;
    overflow: hidden;
    width: 520px;
    height: 280px;
    margin: 100px auto;
}
/*滚动区 包裹所有图片的盒子 宽度要足够宽可以放下所有的图片*/
.images {
    position: absolute;
    top: 0;
    left: 0;
    width: 700%;
}
/* 对图片使用浮动 使其排列在一行*/
.images li{
    float: left;
}
/* 图片大小会撑大盒子,设置图片大小 */
.banners img {
    width: 520px;
    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:

window.addEventListener('load', function () {
    //1. 获取元素
    let prev = document.querySelector('.prev');
    let next = document.querySelector('.next');
    let 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. 动态生成小圆圈 有几张图片，就生成几个小圆圈
    let images = document.querySelector('.images');
    let dots = document.querySelector('.dots');
    let banners_width = banners.offsetWidth;
    for (let i = 0; i < images.children.length; i++) {
        //创建一个小li
        let li = document.createElement('li');
        //记录当前小圆圈的索引号 通过创建自定义属性来做
        li.setAttribute('index', i);
        dots.appendChild(li);
        //5. 小圆圈的排他思想 可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click', function () {
            for (let i = 0; i < dots.children.length; i++) {
                dots.children[i].className = '';
            }
            this.className = 'active';
            // 6. 点击小圆圈，移动图片，本质移动的是ul
            //ul 的移动距离 就是小圆圈的索引号 * 图片的宽度 注意是负值
            // 当我们点击了某个小li 就拿到它的index属性
            let 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最后面，在其后克隆小圆点不会多
    let first = images.children[0].cloneNode(true);
    images.appendChild(first);

    // 点击右侧按钮，图片滚动一张
    let num = 0;
    //circle 控制小圆圈的播放
    let 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);
        // 8. 点击右侧按钮，小圆圈跟随一起变化
        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 (let i = 0; i < dots.children.length; i++) {
            dots.children[i].className = '';
        }
        dots.children[circle].className = 'active';
    }
    let timer = setInterval(function () {
        //手动调用点击事件
        next.click();
    }, 2000);

})

//定时器：
function animate(obj, target,callback) {
    //让元素只有一个定时器在执行，需要清除以前的定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        let 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);
}