每天一个前端小案例|Day3pink老师css+js轮番图刷新更换-CSDN博客

本文链接：https://blog.csdn.net/weixin_73732784/article/details/133849839

案例：

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮番图点击切换</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="slider">
        <div class="slider-wrapper">
            <img src="./images/slider01.jpg" alt="" />
        </div>
        <div class="slider-footer">
            <p>对人类来说会不会太超前了？</p>
            <ul class="slider-indicator">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="toggle">
                <button class="prev">&lt;</button>
                <button class="next">&gt;</button>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
    </div>
</body>

</html>

css：

* {
    box-sizing: border-box;
    /* box-sizing: 有属性有俩个值content-box和border-box，前一个设置宽度和高度的时候不会算内边距和边框的值，
    之后我们得到的盒子会比预想的大，后一个值则相反 */
}

.slider {
    width: 560px;
    height: 400px;
    overflow: hidden;
    /* overflow属性的值： （如果内容溢出一个元素的框，会发送什么）
    visible:默认值。内容不会被修剪，会呈现在元素框之外。
    hidden：内容会被修剪，并且其余内容是不可见的。
    scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
  auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
  inherit：规定应该从父级元素继承overflow的值
  */
}

.slider-wrapper {
    width: 100%;
    /* 父元素宽度的100% */
    height: 320px;
}

.slider-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
    /* 元素转换，转换为块级元素 */
}

.slider-footer {
    height: 80px;
    background-color: rgb(100, 67, 68);
    padding: 12px 12px 0 12px;
    /* 内边距：上左下右 */
    position: relative;
    /* 指定一个元素的定位方法
    absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位，元素的位置通过left top right bottom属性进行规定
    fixed 生成固定定位的元素，相对于浏览器窗口进行定位 元素通过left top rigtht bottom属性进行规定
    relative生成相对定位的元素 相对于其正常位置进行定位
    。。。。
    
    */
}

.slider-footer .toggle {
    position: absolute;
    right: 0;
    top: 12px;
    display: flex;
    /* 布局 */
}

.slider-footer .toggle button {
    margin-right: 12px;
    /* margin外边距 */
    width: 28px;
    height: 28px;
    appearance: none;
    /* appearance使元素看上去像个啥 */
    border-radius: 4px;
    /* 设置边框圆角 */
    cursor: pointer;
    /* cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 */
}

.slider-footer .toggle button:hover {
    background: rgba(255, 255, 255, 0.2);
}

.slider-footer p {
    margin: 0;
    color: #fff;
    font-size: 18px;
    margin-bottom: 10px;
}

.slider-indicator {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
}

.slider-indicator li {
    width: 8px;
    height: 8px;
    margin: 4px;
    border-radius: 50%;
    background: #fff;
    opacity: 1.4;
    /* 设置一个div元素的透明度级别： */
    cursor: pointer;
}

.slider-indicator li.active {
    width: 12px;
    height: 12px;
    opacity: 1;
}

js：

(() => {


    // 定义一个数组来存放所有的内容
    const arr = [{
            url: 'images/slider01.jpg',
            title: '对人类来说会不会太超前了',
            color: 'rgb(100,67,68)'

        },
        {
            url: './images/slider02.jpg',
            title: '开启剑与雪的黑暗传说！',
            color: 'rgb(43, 35, 26)'
        }, {
            url: './images/slider03.jpg',
            title: '真正的jo厨出现了！',
            color: 'rgb(36, 31, 33)'
        }, {
            url: './images/slider04.jpg',
            title: '李玉刚：让世界通过B站看到东方大国文化',
            color: 'rgb(139, 98, 66)'
        }, {
            url: './images/slider05.jpg',
            title: '快来分享你的寒假日常吧~',
            color: 'rgb(67, 90, 92)'
        }, {
            url: './images/slider06.jpg',
            title: '哔哩哔哩小年YEAH',
            color: 'rgb(166, 131, 143)'
        }, {
            url: './images/slider07.jpg',
            title: '一站式解决你的电脑配置问题！！！',
            color: 'rgb(53, 29, 25)'
        }, {
            url: './images/slider08.jpg',
            title: '谁不想和小猫咪贴贴呢！',
            color: 'rgb(99, 72, 114)'
        },
    ]

    //先获得一个随机数
    const random = Math.floor(Math.random() * arr.length)

    // 更换图片
    const images = document.querySelector('.slider-wrapper img')
    images.src = arr[random].url

    // 更换文字内容
    const p = document.querySelector('.slider-footer p')
    p.innerHTML = arr[random].title

    // 修过背景颜色
    const footer = document.querySelector('.slider-footer')
    footer.style.backgroundColor = arr[random].floor

    // 修改小圆点
    const li = document.querySelector(`.slider-indicator li:nth-child(${random + 1})`)
    li.classList.add('active')



})();