前端入门，我的第一个轮播图

亦难寻

已于 2023-02-11 17:46:08 修改

阅读量117

点赞数

分类专栏：前端入门文章标签： css html 前端 javascript Powered by 金山文档

于 2023-02-11 17:45:36 首次发布

本文链接：https://blog.csdn.net/m0_48356361/article/details/128986161

版权

前端入门专栏收录该内容

2 篇文章 0 订阅

订阅专栏

博主写法可能有些冗余，看完的小伙伴可以评论，O(∩_∩)O

第一部分：html部分

<body>
    <div class="box">
        <div class="divBtn">
            <p class="p_left"><a href="###">＜</a>
            </p>
            <p class="p_right"><a href="###">＞</a></p>
        </div>
        <ul class="ulImg">
            <li class="on"><a href="###"><img src="./images/01.jpg" alt=""></a></li>
            <li><a href="###"><img src="./images/02.jpg" alt=""></a></li>
            <li><a href="###"><img src="./images/03.jpg" alt=""></a></li>
            <li><a href="###"><img src="./images/04.jpg" alt=""></a></li>
            <li><a href="###"><img src="./images/05.jpg" alt=""></a></li>
            <li><a href="###"><img src="./images/06.jpg" alt=""></a></li>
        </ul>
        <ol class="olList">
            <li class="on"><a href="###">1</a></li>
            <li><a href="###">2</a></li>
            <li><a href="###">3</a></li>
            <li><a href="###">4</a></li>
            <li><a href="###">5</a></li>
            <li><a href="###">6</a></li>
        </ol>
    </div>
</body>

第二部分：CSS样式

 * {
     margin: 0;
     padding: 0;


 }

 .box {
     width: 400px;
     height: 270px;
     margin: 150px auto;
     background: rgb(133, 137, 138);
     box-sizing: border-box;
     position: relative;
     overflow: hidden;
 }

 a {
     text-decoration: none;
     color: white;
 }

 .ulImg,
 .olList {
     list-style: none;

 }

 .divBtn {
     position: absolute;
     /* z-index: 1; */
     color: white;
     position: relative;
 }

 .divBtn .p_left,
 .divBtn .p_right {
     width: 30px;
     height: 30px;
     background-color: rgb(139, 188, 207);
     border-radius: 50%;
     line-height: 30px;
     font-size: 18px;
     text-align: center;
     position: absolute;
     top: 120px;
 }

 .divBtn .p_left {
     left: -8px;
 }

 .divBtn .p_right {
     right: -8px;
 }

 .ulImg li {
     position: absolute;
 }

 .ulImg li:first-child {
     z-index: 1;
 }

 .ulImg li img {
     border: 0;
     width: 400px;
     height: 250px;
 }

 .ulImg {
     width: 400px;
     height: 270px;
     position: absolute;
     top: 0;
     left: 0;
 }

 .olList {
     width: 80%;
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     justify-content: space-around;
 }

 .olList li {
     float: left;
     font-size: 13px;
     width: 20px;
     height: 20px;
     border-radius: 70%;
     text-align: center;
     line-height: 20px;
     color: rgb(255, 252, 252);
     background-color: rgb(120, 120, 203);
 }

 .olList li.on {
     width: 30px;
     border-radius: 70%;
     background-color: rgb(49, 128, 255);
 }

第三部分：JS部分(注释较多，小白可以看懂吧)

// 入口函数，防止DOM元素加载失败，
$(function () {
    // 图片与页码都展示第一个
    // 设置全局的下标与延时器，调用时使用
    let trimer = null
    let index = 0     //声明并赋值是最好的初始化办法

    // 1.自动轮播图
    // 使用函数封装，方便调用方法
    function begin() {
        // 延时器：,每一秒执行
        trimer = setInterval(function () {
            index++ //每一秒下标+ 1
            // 下标长度大于图片数量，就让他的下标= 0
            if (index >= $('.ulImg li').length) {
                index = 0
            }
            // 当前图片下标给到当前图片的层级，但是第一张图片下标为0，会导致层级问题，所以这里给他的兄弟元素全为-1
            $('.ulImg li').eq(index).css('zIndex', index).siblings().css('zIndex', -1)
            // 页码的图标就正常使用即可，当前下标添加样式，其他元素清除样式
            $('.olList li').eq(index).addClass('on').siblings().removeClass('on')

        }, 1000)
    }
    // 调用一下，使浏览器打开直接就能运行
    begin()

    // 2.hover()写法：鼠标移入，停止动画，显示左右按钮
    $('.box').hover(function () {
        // 停止动画
        clearInterval(trimer)
        // 显示左右按钮
        $('.divBtn').css('zIndex', 10)  //使用z-index改变按钮层级

        // 3.鼠标移出，开始动画
    }, function () {
        begin()
        // 隐藏左右按钮
        $('.divBtn').css('zIndex', -5)  //同样为了解决图片下标为0问题，不设置0而是设置负数
    })

    // 4.按钮点击事件 点击左按钮
    $('.divBtn .p_left').click(function () {
        index--
        if (index <= -1)
            index = 5
        $('.ulImg li').eq(index).css('zIndex', index).siblings().css('zIndex', -1)
        $('.olList li').eq(index).addClass('on').siblings().removeClass('on')
    })

    // 4.按钮点击事件 点击左按钮
    $('.divBtn .p_right').click(function () {
        index++
        if (index >= 6)
            index = 0
        $('.ulImg li').eq(index).css('zIndex', index).siblings().css('zIndex', -1)
        $('.olList li').eq(index).addClass('on').siblings().removeClass('on')
    })

    // 5.点击页码事件
    $('.olList li').click(function () {
        // 获取此时点击的下标
        index = $(this).index()
        console.log(index);
        $('.ulImg li').eq(index).css('zIndex', index).siblings().css('zIndex', -1)
        $('.olList li').eq(index).addClass('on').siblings().removeClass('on')
    })
})