轮播图写法

1.Jquery：

JS:

const $spans = $('.span>span')

console.log($spans);


//jq里的foreach是each:
//参数1：需要遍历的嘟嘟
$.each($spans, function () {

    //小圆点
    $(this).mouseover(function () {

        //增加小圆点active
        $(this).addClass('active').siblings().removeClass('active')

        //100%移动图片
        $('.img>img').css('left', `-${$spans.index(this)}00%`) //xx.index(this) 0/1/2...

    })
})

//上一页按钮：
$('.btn>button').eq(0).click(function () {

    //不能这么写：jq里的prev()是个数组，不是单纯的null/undefined
    // if (!$('.active').prev()) {
    //     $('.active').prev() = $spans[2]
    // }


    //函数的执行结果不能作为左边的值！！！！！！！
    let before = $('.active').prev()

    //函数的执行结果不能作为左边的值！！！！！！！
    //  if ($('.active').prev().length === 0) 不能这么写
    if (before.length === 0) {
        before = $spans.last()
    }
    before.mouseover()
})

//下一页按钮：
$('.btn>button').eq(1).click(function () {

    let after = $('.active').next()

    if (after.length === 0) {
        after = $spans.first()
    }
    after.mouseover()
})

//定时器：
//需写在变量里
let interval = setInterval(() => {
    $('.btn>button').eq(1).click()
}, 2000)

//指针放上时停止定时器
$('.img>img').mouseover(function () {
    clearInterval(interval)
})

//指针挪走时开启定时器
$('.img>img').mouseleave(function () {
    //一定要这么写，不然就坏了
    interval = setInterval(() => {
        $('.btn>button').eq(1).click()
    }, 2000)
})

HTML:

<!-- 轮播图 -->
<div>
    <div class="img">
        <img src="/pet/pic/img/home/carousel/test1.jpg" alt="">
        <img src="/pet/pic/img/home/carousel/test2.jpg" alt="">
        <img src="/pet/pic/img/home/carousel/test3.jpg" alt="">
    </div>
    <div class="btn">
        <button>上一页</button>
        <button>下一页</button>
    </div>

    <p>================111</p>
    <div class="span">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>

    </div>

</div>

2.swiper:

HTML：

<div class="swiper">

        <!-- 图片 -->
        <div class="swiper-wrapper">

            <!-- 循环 -->
            <div class="swiper-slide">
                <img src="/pet/pic/img/home/carousel/test1.jpg" alt="">
                <p>====穿衣服的柯基====</p>
            </div>
            <div class="swiper-slide">
                <img src="/pet/pic/img/home/carousel/test2.jpg" alt="">
                <p>====揣进袋子的柯基====</p>
            </div>
            <div class="swiper-slide">
                <img src="/pet/pic/img/home/carousel/test3.jpg" alt="">
                <p>====歪头杀的柯基====</p>
            </div>
            <div class="swiper-slide">
                <img src="/pet/pic/img/home/carousel/test4.png" alt="">
                <p>====乱入的边牧====</p>
            </div>

        </div>

        <!-- 分页器点点 -->
        <div class="swiper-pagination"></div>

        <!-- 前后按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

    </div>

CSS注意事项：

//轮播点点，固定的class
.swiper-pagination-bullet{
    background-color: var(--colorMain4);                
}

//轮播按钮
.swiper-button-prev,.swiper-button-next{
    color: var(--colorMain4);
}

//如果想在img上面覆盖文字，需要绝对定位弄出来
p{
    position:absolute;
}

JS:

var mySwiper = new Swiper('.swiper', {
    //自动播放
    autoplay: {
        delay: 2000,//间隔
        pauseOnMouseEnter: true,//鼠标进入时，暂时停止
        disableOnInteraction: false,//鼠标离开时，继续播放
    },

    //分页器点点
    pagination: {
        el: '.swiper-pagination',
        clickable: true,//点击小圆点可以切换
    },

    //前后按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },

})