构造函数封装版轮播图

CSS+HTML

轮播图封装版

prevBtn nextBtn

JS+ class carouselImage { constructor(number, height, width, color) { this.number = (number || 5) + 2; this.height = height || "200"; this.width = width || "200"; this.backgroundColor = color || "red" this.box = $("#container") this.show() } show() { for (var i = 0; i < this.number; i++) { var $item = $(" ") $item.text(i) $item.height(this.height + "px") $item.width(this.width + "px") $item.css("backgroundColor", this.backgroundColor); this.box.append($item) } }

}

$(document).ready(function () {
// ---------------初始化参数-----------------
//给box设置总宽
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲container").wid…("#container").children() * itemCreatItem.width)
//给shade遮罩设置宽高
$("#swipper").width(itemCreatItem.width)
$("#swipper").height(itemCreatItem.height)
// 给第一个方块设置值
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲container secti…("#container").children().length - 2)
// 给最后一个方块设置值
$("#container section").last().text(1)
//执行小圆点默认图片初始化

//偏移初始化
$("#container").css("left", -itemCreatItem.width)
// 索引初始化
var $index = 1;


// ---------小圆点初始化--------------
var $itemList = $("#itemList")
// 圆点父节点的宽度为个数*40
$("#itemList").width(($("#container").children().length - 2) * 40)
// 执行创建小圆点函数
creat($itemList)
function creat($itemList) {
    for (var $i = 0; $i < $("#container").children().length - 2; $i++) {
        var $item = $("
")
        // 为什么这里index赋值不上
        $item.index = $i;
        $item.css("cursor", "pointer")
        $itemList.append($item)
    }
    for (var $i = 0; $i < $("#container").children().length - 2; $i++) {
        // 赋值标签
        // 问:为什么用[]可以,用$.eq就不可以-=---------------------------------------
        $("#itemList li")[$i].index = $i;
        // $paragraphBtnItemArrary.eq($count).index = $i;
    }
}
// 赋值
pointCssChange(0)
// startTime()
// ----------------初始化结束------------------

// ------左右点击事件----------
$("#nextBtn").click(function () {
    $index++;
    moveEvent($index)
})
$("#prevBtn").click(function () {
    $index--;
    moveEvent($index)
})

// ---------小圆点点击--------------
$("#itemList li").click(function ($event) {
   


    $pointTemp = $event.target.index + 1
    moveEvent($pointTemp)
    $index = $pointTemp
    // $("#itemList li").eq($event.target.index).addclass(".point")
    pointCssChange($event.target.index)

});


//  ---------------以为小圆更换图片----------------
function pointCssChange(number) {
    $("#itemList li").css({ "background": "#ffffff" });
    $("#itemList li").eq(number).css({ "background": "gray" });
}
// ----------------以上为小圆点操作----------------


// ---------------以下为自动轮播---------------

//默认定时器
var timer = setInterval(function () {
    $index++;
    moveEvent($index)
}, 3000)


// -------移动方法-----------
function moveEvent($event) {
    // 清空定时器
    closeTimeEvent()
    //开启定时器
    startTimeEvent()

    $("#container").css("transition", "all 0.5s")
    $("#container").css("left", $event * (-itemCreatItem.width) + "px")
    pointCssChange($event - 1)
    if ($event >= itemCreatItem.number - 1) {
        pointCssChange(0)
        setTimeout(function () {
            console.log(1)
            $index = 1;
            $("#container").css("transition", "none")
            $("#container").css("left", $index * (-itemCreatItem.width) + "px")

        }, 500)
        return;
    }
    if ($event <= 0) {
        setTimeout(function () {
            console.log(1)
            $index = itemCreatItem.number - 2;
            $("#container").css("transition", "none")
            $("#container").css("left", $index * (-itemCreatItem.width) + "px")
        }, 500)
        return;
    }
}
//鼠标悬停是否关闭
// $("#swipper").on("mouseenter", function () {
//     closeTimeEvent()
// })
// $("#swipper").on("mouseleave", function () {
//     startTimeEvent()
// })
// 关闭定时器
function closeTimeEvent()
{
    if(timer!=null)
    {
        clearInterval(timer)
        console.log("我清空了定时器")
        timer = null
    }
}
//开启定时器
function startTimeEvent()
{
    if (timer == null) {
        timer = setInterval(function () {
            console.log("我开启了定时器")
            $index++;
            moveEvent($index)
        }, 3000)
    }
}

});