【前端】案例1 轮播图【HTML/CSS/JS】+JQ

最新推荐文章于 2024-06-12 11:13:48 发布

热爱前端，学习前端

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量555

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/weixin_61972561/article/details/131487417

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

引入JQ

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

CSS代码

/* 轮播图部分 */
        .two_content {
            width: 100%;
            height: 490px;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            z-index: 1;
        }

        .bigimages {
            width: 10000px;
            height: 500px;
            z-index: 1;
            position: relative;

        }

        .bigimages img {
            width: 1536px;
            height: 482px;
        }

        .bigimages :nth-child(1) {
            z-index: 10;
        }

        .right_remove {
            width: 60px;
            height: 60px;
            background-image: url('./../images/right_tb.png');
            position: absolute;
            opacity: 0.5;
            right: -60px;
            top: 250px;
            z-index: 10;
            transition: 1s;
        }

        .right_remove:hover {
            opacity: 1;
        }

        .left_remove {
            width: 60px;
            height: 60px;
            background-image: url('./../images/left_tb.png');
            position: absolute;
            opacity: 0.5;
            left: -60px;
            top: 250px;
            z-index: 10;
            transition: 1s;

        }

        .left_remove:hover {
            opacity: 1;
        }

        .bigimg_prompt {
            width: 200px;
            height: 18px;
            position: absolute;
            bottom: 20px;
            left: 700px;
            display: flex;
            justify-content: space-around;
            z-index: 10;
        }

        .bigimg_prompt div {
            width: 45px;
            height: 5px;
            border-radius: 5px;
        }

        .bigimg_prompt div:nth-child(1) {

            background-color: #FFFFFF;
        }

        .bigimg_prompt div:nth-child(n+2) {
            background-color: rgba(0, 0, 0, 0.3);
        }

HTML代码

 <!-- 第二部分 图片轮播器-->
    <div class="two_content">
        <div class="left_remove "></div>
        <div class="right_remove"></div>
        <div class="bigimages">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/08/31/s630ec3a73e553.jpg" alt="" data="0">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/09/28/s63340e337270c.jpg" alt="" data="1">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/11/29/s63859d939961e.jpg" alt="" data="2">
            <img src="https://img.dpm.org.cn/Uploads/Picture/2022/11/29/s6385b09f3f21f.jpg" alt="" data="3">
        </div>
        <div class="bigimg_prompt">
            <div class="bigimg_prompt_img "></div>
            <div class="bigimg_prompt_img "></div>
            <div class="bigimg_prompt_img "></div>
            <div class="bigimg_prompt_img "></div>
        </div>
    </div>

JS代码

<script>
    $(function () {
        //轮播图
        var timeIn = setInterval(carousel, 1000 * 4)
        var bigImgPromptImg = $('.bigimg_prompt_img ')
        var bigImages = $('.bigimages');
        var images = $('.bigimages img');
        var index = 0
        //轮播样式变化
        function styleBanner() {
            images.eq(index).show()
            images.eq(index).siblings().hide()
            bigImgPromptImg.eq(index).css("backgroundColor", "#FFFFFF");
            bigImgPromptImg.eq(index).siblings().css("backgroundColor", "rgba(0, 0, 0, 0.3)");
        }
        //自动轮播
        function carousel() {
            index++
            if (index > 3) {
                index = 0
            }
            styleBanner()

        }
        //鼠标悬浮停止轮播
        var twoContent = $('.two_content')
        var rightRemove = $('.right_remove')
        var leftRemove = $('.left_remove')
        twoContent.mouseover(function () {
            clearInterval(timeIn)
            rightRemove.css({
                right: "100px"
            })
            leftRemove.css({
                left: "100px"
            })
        })
        twoContent.mouseout(function () {
            timeIn = setInterval(carousel, 1000 * 3)
            rightRemove.css({
                right: "-60px"
            })
            leftRemove.css({
                left: "-60px"
            })
        });
        //点击底下长条实现切换
        bigImgPromptImg.click(function () {
            index = $(this).index();
            styleBanner()

        })
        //向右移
        rightRemove.click(function () {
            index++;
            if (index > 3) {
                index = 0
            }
            styleBanner()

        })
        //向左移
        leftRemove.click(function () {
            index--;
            if (index < 0) {
                index = 3
            }
            styleBanner()

        })
    })
</script>