构造函数封装版轮播图

比眉伴天荒 2024-04-19 11:43 62阅读 0赞

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 = $("<li></li>")
            // 为什么这里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)
        }
    }

\});