电商首页的轮播图

实现功能

1、自动轮播
2、鼠标划入左右按钮出现，划出消失
3、左右按钮点击转换
4、下方小圆点实现切换

效果

在这里插入图片描述

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/style.css">
</head>
<body>
    <div class="box">

        <!-- 图片 -->
        <div class="img1">
            <img src="./res/img1.jpg" alt="">
        </div>
        <div class="img2">
            <img src="./res/img2.jpg" alt="">
        </div>
        <div class="img3">
            <img src="./res/img3.jpg" alt="">
        </div>
        <div class="img4">
            <img src="./res/img4.jpg" alt="">
        </div>
        <div class="img5">
            <img src="./res/img5.jpg" alt="">
        </div>

        <!-- 左右按钮 -->
        <div class="leftBtn">&lt;</div>
        <div class="rightBtn">&gt;</div>

        <!-- 下面用于跳转的小圆点 -->
        <div class="jump">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    
    <script src="./src/jquery-3.3.1.js"></script>
    <script src="./src/script.js"></script>
</body>
</html>

css 文件

* {
    
    
    margin: 0px;
    padding: 0px;
}

/* 设置轮播图盒子位置及大小 */
.box {
    
    
    position: relative;
    width: 520px;
    height: 280px;
    margin: auto;
}

/* 设置图片 */
.box img {
    
    
    position: absolute;
    opacity: 0;
    transition: all 1.5s;
}

.box .img1 img {
    
    
    opacity: 1;
}

/* 设置左按钮 */
.leftBtn {
    
    
    width: 20px;
    height: 35px;
    position: absolute;
    top:120px;
    background-color: rgba(0,0,0, .3);
    color:white;
    text-align: center;
    font-size: 20px;
    line-height: 35px;
    border-radius: 0 30% 30% 0;
    display: none;
}

.leftBtn:hover {
    
    
    background-color: rgba(0,0,0, .6);
}

/* 设置右按钮 */
.rightBtn {
    
    
    width: 20px;
    height: 35px;
    position: absolute;
    right: 0px;
    top:120px;
    background-color: rgba(0,0,0, .3);
    color:white;
    text-align: center;
    font-size: 20px;
    line-height: 35px;
    border-radius: 30% 0 0 30%;
    display: none;
}

.rightBtn:hover {
    
    
    background-color: rgba(0,0,0, .6);
}

/* 下面用于跳转的小圆点  */
.jump ul{
    
    
    position: absolute;
    list-style: none;
    bottom: 10px;
    right:220px;
}

.jump li {
    
    
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 100%;
    float: left;
    margin-right: 4px;
}

li:first-child {
    
    
    background-color: red;
}

js 文件

$(function() {}) 是 $(document).ready(function() 的简写, 这个函数在 DOM 加载完毕之后执行。

$(function () {
    
    
    let index = 0; // 图片索引
    let timer;
    time();

    // 计时器函数
    function time() {
    
    
        timer = setInterval(function () {
    
    
            index++
            if (index == $('.box img').length) {
    
    
                index = 0;
                // 设置图片透明与否
                $('.box img').css("opacity", "0");
                $('.box img').eq(index).css("opacity", "1");

                // 设置下方圆点变化样式
                $('.jump li').css("background-color", "white");
                $('.jump li').eq(index).css("background-color", "red");
            } else {
    
    
                // 设置图片透明与否
                $('.box img').css("opacity", "0");
                $('.box img').eq(index).css("opacity", "1");

                // 设置下方圆点变化样式
                $('.jump li').css("background-color", "white");
                $('.jump li').eq(index).css("background-color", "red");
            }

        }, 3000)
    }

    // 鼠标移入图片盒子时左右按钮显示
    $('.box').mouseover(function() {
    
    
        $('.leftBtn').css('display','block');
        $('.rightBtn').css('display','block');
    })

    $('.box').mouseout(function() {
    
    
        $('.leftBtn').css('display','none');
        $('.rightBtn').css('display','none');
    })

    // 设置左按钮
    $('.leftBtn').click(function() {
    
    
        clearInterval(timer);
        if (index == 0) {
    
    
            index = $('.box img').length - 1;
        } else {
    
    
            index--;
        }
        // 设置图片透明与否
        $('.box img').css("opacity", "0");
        $('.box img').eq(index).css("opacity", "1");

        // 设置下方圆点变化样式
        $('.jump li').css("background-color", "white");
        $('.jump li').eq(index).css("background-color", "red");

        time();
    })

    // 设置右按钮
    $('.rightBtn').click(function () {
    
    
        clearInterval(timer);
        if (index == $('.box img').length - 1) {
    
    
            index = 0;
        } else {
    
    
            index++;
        }
        // 设置图片透明与否
        $('.box img').css("opacity", "0");
        $('.box img').eq(index).css("opacity", "1");

        // 设置下方圆点变化样式
        $('.jump li').css("background-color", "white");
        $('.jump li').eq(index).css("background-color", "red");

        time();
    })

    // 设置下面用于跳转的小圆点
    for (let i = 0; i <= $('li').length; i++) {
    
    
        $('li').eq(i).click(function () {
    
    
            clearInterval(timer);
            index = i;

            // 设置图片透明与否
            $('.box img').css("opacity", "0");
            $('.box img').eq(index).css("opacity", "1");

            // 设置下方圆点变化样式
            $('.jump li').css("background-color", "white");
            $('.jump li').eq(index).css("background-color", "red");

            time();
        })
    }
})

电商首页的轮播图

实现功能

效果

html 文件

css 文件

js 文件

猜你喜欢