jQuery轮播图

 所运用到的方法

// 根据jQuery的淡入淡出实现
// 用到的jQuery方法
fadeIn();//淡入
fadeOut();//淡出
addClass();//给该元素添加一个class类名
siblings();//用于选取每个匹配元素的所有同辈元素(不包括自己),并以jQuery对象的形式返回。
eq()：
//用于获取匹配元素集合中特定位置的元素。这个方法的参数是一个索引值，
// 它返回的是集合中对应索引位置的元素。需要注意的是，
// 这个索引是基于 0 的，也就是说，第一个元素的索引是 0，
// 第二个元素的索引是 1，依此类推。
$('div').eq(1) // 返回第二个
元素

HTML

CSS

/* 轮播图 */
.widths{
    width: 1224px;
}
.curBox{
    width: 100%;
    height: 50px;
    position: absolute;
    left: 0;
    top:50%;
    z-index: 999;
    display: flex;
    justify-content: space-between;
}
.curBox_left{
    width: 50px;
    height: 50px;
    background-color: yellow;
    cursor: pointer;
}
.curBox_right{
    width: 50px;
    height: 50px;
    background-color: yellow;
    cursor: pointer;
}
.circularBox{
    position: absolute;
    width: 80px;
    height: 20px;
    bottom: 20px;
    display: flex;
    justify-content: space-between;
    left: calc( 50% - 40px );
    z-index: 999;
}
.circularBox>li{
    width: 20px;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgb(213, 213, 213);
    cursor: pointer;

}
.Carousel_frame{
    width: 1224px;
    height: 500px;
    margin: 130px auto 44px auto;
    position: relative;
    overflow: hidden;
    position: relative;
}
.active{
    background-color: #4EA7E2;
}
.CarouselBox{
    position: absolute;
    left: 0;
    padding: 0;
    width: 3672px !important;
    height: 500px !important;
    
    display: flex;
}
.CarouselBox_li{
    width: 1224px;
    height: 500px;
}
.CarouselBox_li>img{
    width: 100%;
    height: 100%;
}

JS

var index = 0;
// 自动轮播
var time;
autoplay();
function autoplay() {
    time = setInterval(() => {
        next_pic();
        console.log(111);
    }, 2000)
}
// 点击上一张
$("#LeftBox")[0].onclick = () => {
    prev_pic();
}
// 点击下一张
$("#RightBox")[0].onclick = () => {
    next_pic();
}
// 悬浮停止
$(".Carousel_frame")[0].onmouseover = () => {
    clearInterval(time);
}
// 移出继续
$(".Carousel_frame")[0].onmouseout = () => {
    autoplay();
}
// 点击小圆点显示对应图片
var dot = $(".circularBox_li")
console.log(dot);
for (let i = 0; i < dot.length; i++) {
    dot[i].onclick=()=>{
        index = i
        addStyle()
    }
}
// 控制图片显示隐藏,小圆点背景色
function addStyle() {
    $(".CarouselBox_li").eq(index).fadeIn();//淡入
    $(".CarouselBox_li").eq(index).siblings().fadeOut();//淡出
    $(".circularBox_li").eq(index).addClass("active");
    $(".circularBox_li").eq(index).siblings().removeClass("active");
}
// 下一张
function next_pic() {
    index++;
    if (index > 2) {
        index = 0;
    }
    addStyle();
}
// 上一张
function prev_pic() {
    index--;
    if (index < 0) {
        index = 2;
    }
    addStyle();
}