用html+css+js尝试写一个轮播图

2023-12-24 20:19:22

1.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="css/style.css">
    <head>
<body>
<main id="main">
    <!-- 虚化背景 -->
    <div class="bg"></div>
    <!-- 图片框 -->
    <section>
        <!-- 放图片 -->
        <div class="box">
            <img src="img/images/1.jpg" class="image" alt="">
        </div>
        <!-- 小圆点 -->
        <div class="select">
            <!-- <div class="point check"> </div> -->
        </div>
        <!-- 左右切换按钮 -->
        <div class="button left"><span><</span></div>
        <div class="button right"><span>></span></div>
    </section>
</main>
</body>
<script src="js/js1.js"></script>
</html>

2.css部分

1）先去除边距,调整虚化背景的位置和大小

* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    /*左对齐*/
    align-items: flex-start;
}
main {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
main .bg {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    /*起始虚化图片*/
    background-image: url('img/images/1.jpg');
    background-size: 100% 100%;
    filter: blur(30px);
}

2) 调整图片的大小

main section .box {
    width: 100%;
    height: 100%;
}
main section .box .image {
    width: 80%;
    height: 80%;
    object-fit: cover;
   /* 保持图片原有尺寸比例。但部分内容可能被剪切*/
    position: absolute;
    top: 10%;
    left: 10%;
    border-radius: 10px;
    box-shadow: 3px -3px 6px #565454;
}

3) 调整小圆点的大小和位置

main .select {
    position: absolute;
    bottom: 10px;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
main .select .point {
    /*调整小圆点的大小*/
    margin: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 2px inset rgba(250, 229, 229, 0.7);
}
main .select .point:hover {
    /*设置隐藏效果*/
    background-color: rgb(255, 254, 254);
    cursor: pointer;
}
main .select .check {
    background: white;
}

4）设置左右按钮的样式

main section .button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: rgba(82, 81, 81, 0.2);
    border-radius: 20%;
    cursor: pointer;
    transition: all 0.1s;
}
main section .button:hover {
    box-shadow: inset 0 0 1px rgba(255, 255, 255, .8),
    inset 0 0 5px rgba(255, 255, 255, .8),
    inset 0 0 15px rgba(255, 255, 255, .8);
}
main section .left {
    left: 30px;
}
main section .right {
    right: 30px;
}
span {
    font-size: 50px;
    line-height: 40px;
    text-align: center;
    color: rgba(239, 233, 233, 0.5);

}

5）简单的动画效果

.tran{
    /*图片转换绑定到小圆点，在两秒内完成，从头到尾的速度是相同的，播放无限次*/
    animation: point 2s linear infinite;
}
@keyframes point{
    /*在关键帧内,小圆点的模糊度和不透明度会改变*/
    0%,100%{
        opacity: 0.2;
        backdrop-filter: blur(10px);
    }
    30%,70%{
        opacity: 1;
        backdrop-filter: blur(0px);
    }
}

3.js部分

1）获取元素和设置新元素

let main = document.getElementById('main');
let point = document.getElementsByClassName('point');
let image = document.querySelector('.image');
let select = document.querySelector('.select');
let left = document.querySelector('.left');
let right = document.querySelector('.right');
let bg = document.querySelector('.bg');
// 获取选择器中的第一个元素
let picture = ['img/images/1.jpg', 'img/images/2.jpg', 'img/images/3.jpg', 'img/images/4.jpg', 'img/images/5.jpg', 'img/images/6.jpg'];
// 设置index为0，这个变量后面就一直用来充当图片数组的下标
let index = 0;
// 从图片数组的长度，动态添加小圆点
for (let i = 0; i < picture.length; i++) {
    let dot = document.createElement('div');
    dot.classList.add('point');
    select.appendChild(dot);
    //添加自定义属性index，对应每张图片的下标
    dot.index = i;
}

2）用新函数清除和切图操作

//清除所有小圆点check样式
function clear() {
    for (let i = 0; i < point.length; i++) {
        point[i].classList.remove('check');
    }
}
// 切下一张图的封装函数，后面也是要引用
function work() {
    // index加1
    index = index + 1;
    if (index === picture.length) {
        index = 0;
    }
    // 显示图片，显示图片数组下标为目前index那张
    image.src = picture[index];
    // 虚化背景也要换
    bg.style.cssText = ` background-image: url(${picture[index]});`
    // 小圆点的显示
    clear();
    // 显示那张图就显示对于的圆点，给他.check的样式
    point[index].classList.add('check');
    // 若index超过，回到-1，+1再从0开始
    if (index === picture.length - 1) {
        index = -1;
    }
}

3）绑定切图操作

// 点击向右按钮时的操作
right.addEventListener('click', function () {
    //鼠标事件监听
    // 直接用上面的切图函数
    work();
})
// 点击向左按钮时的操作
left.addEventListener('click', function () {
    index = index - 1;
    if (index === -1) {
     //index==-1说明已经退到了第一张图片
     //再回到最后一张图片
        index = picture.length - 1;
    }
    image.src = picture[index];
    bg.style.cssText = ` background-image: url(${picture[index]});`
    // 向左时小圆点的显示
    clear();
    // 为小圆点添加样式
    point[index].classList.add('check');
})
// 进入main这个底层盒子时，停止自动轮播
main.addEventListener('mouseover', function () {
     //停止自动轮播
    clearInterval(viewPager);
    image.classList.remove('tran');
})
// 离开main这个底层盒子时，开始自动轮播
main.addEventListener('mouseout', function () {
    setInterval(function () {
        work()
    }, 5000);
    // 每5000ms执行切图操作
    image.classList.add('tran');
    // 为图片添加动画
    image.style.animationDelay = '5s';
    // 动画应用与执行的时间差为5s
})
/*  点击小圆点时的切图操作 */
for (let i = 0; i < picture.length; i++) {
    point[i].addEventListener('click', function () {
        clear();
        // 清除小圆点的check样式
        this.classList.add('check');
        index = i;
        image.src = picture[index];
        bg.style.cssText = ` background-image: url(${picture[index]});`
    })
}

4）自动轮播

// 自动轮播定时器与初始状态
let viewPager = setInterval( function (){work()}, 5000);
    // 每5000ms执行切图操作
    image.classList.add('tran');
    // 为图片添加动画
     point[0].classList.add('check');

码农公寓

用html+css+js尝试写一个轮播图

目录

1.html部分

2.css部分

3.js部分

码农公寓

目录

1.html部分

2.css部分

3.js部分

相关文章