jQuery轮播图封装

 思路

 

• 轮播思路：ul宽度等于每张图片的宽度和（如无限大），包括ul的父级div设置超出隐藏，给ul设置相对定位方便使用left进行轮播
• 只重复第一张图片
• 无缝左边过渡思路：头尾各一张相同图片，移动到最左（即尾部 第一张图），取消过渡效果，瞬间跳转到头部第一图，i设置成第二张图片下标，延时器延迟恢复过渡效果和ul移动（方便过渡到第二张图）
• 无缝右边过渡思路：头尾各一张相同图片，移动到最右（即第一张图），取消过渡效果，瞬间跳转到尾部图片（即尾部 第一张图），i设置成倒数第二张图片下标，延时器延迟恢复过渡效果和ul移动（方便过渡到第二张图）

 

 代码

// 参数 父级对象 数据 过渡时间
$.carousel = function(obj, data, time) {
    var index = 0;
    var w = obj.width() //获取父级宽度
    var h = obj.height()
    var timer
    var element = {
        ul: {
            css: 'position: relative;display: flex;width: ' + (data.length + 1) * w +
                'px;list-style: none;height: 100%;left: 0;',
            html: '<ul></ul>'
        },
        li: {
            css: 'width: ' + w + 'px;',
            html: "<li></li>",
            imgcss: "max-height:" + h + "px;width:100%"

        },
        page: {
            ulcss: "display: flex;list-style: none;position: absolute;bottom: 20px;left:50%;transform: translateX(-50%);color: white;background - color: #00000042;border-radius: 50px;",
            html: "<ul></ul>",
            li: "<li></li>",
            licss1: {
                "width": "10px",
                "height": "10px",
                "border-radius": "50%",
                "border": "1px solid white",
                "margin": "5px 10px",
                "background": "white"
            }
        },
        RLbut: {
            css: {
                "width": "30px",
                "height": "30px",
                "border-radius": "0 10px 10px 0",
                "background-color": "rgb(0 0 0/9%)",
                "display": "flex",
                "align-items": "center",
                "justify-content": "center",
                "position": "absolute",
                "top": "50%",
                "transform": "translateY(-50%)",
                "display":"none"
            },
            html: ['<svg ><path d="M 5 5 L 15 15 L 5 25"></path></svg>',
                '<svg ><path d="M 15 5 L 5 15 L 15 25"></path></svg>'
            ],
            path: {
                "stroke": "#464646",
                "fill": "none",
                "stroke-width": "2"
            },
        }

    }

    // 创造轮播ul和加入ul样式
    obj.html(element.ul.html)
    //转换dom操作
    obj.children().get(0).style.cssText = element.ul.css
    //创建分页下标点 
    $(element.page.html).appendTo(obj).get(0).style.cssText = element.page.ulcss

    $.each(data, (i, e) => {
        // 创建li和样式
        $(element.li.html).html("<img src=" + data[i] + " alt>").appendTo(obj.children("ul")
            .first()).css(
            "width", w + "px")
        // 创建img样式
        obj.children("ul").first().children().children("img").get(i).style.cssText = element.li
            .imgcss
        //最后创建第一张图片
        if (i + 1 == data.length) {
            // 创建li和样式
            $(element.li.html).html("<img src=" + data[0] + " alt>").appendTo(obj.children("ul")
                .first()).css(
                "width", w + "px")
            // 创建img样式
            obj.children("ul").first().children().children("img").get(i + 1).style.cssText = element.li
                .imgcss
        }
        //创建分页下标点li  创建标签的时候用css()可以加入样式,用get(i).style，需要分开写不可以
        $(element.page.li).appendTo(obj.children("ul").last()).css(element.page.licss1)
        // obj.children("ul").last().children().get(i).style.cssText = element.page.licss

    })
    // 创建左右按钮
    obj.css("position", "relative")
    for (let i = 0; i < 2; i++) {
        $("<div class='svgRL'></div>").appendTo(obj).css(element.RLbut.css).html(element.RLbut.html[i]).children("svg").css(
        {"width":"20px","height":"100%"}).children("path").css(element.RLbut.path)
    }
    var svgRL=$(".svgRL")
    svgRL.first().css({"right":"0","border-radius": "10px 0 0 10px"})

    // 默认滚动到第一张图
    obj.children("ul").last().children().get(0).style.cssText += "background:black"

    var ul = obj.children("ul").first()
    var page = obj.children("ul").last().children()
    // 执行过渡函数
    function go(n) {
        index = index + n
        //左边无限轮播
        if(index<0){
            ul.animate({
                "left": -w * data.length + "px"
            }, 0)
           index=data.length-1
           
        }
        
        //右边无限轮播 取消最后一张图片过渡时间,快速返回第一张
        if (index == (data.length + 1)) {
            ul.animate({
                "left": "0px"
            }, 0)
            index = 1;
                
        }
        ul.animate({
            "left": -w * index + "px"
        }, 1000)
        
        $(page.get(index % (data.length))).siblings("li").css("background", "white")
        page.get(index % (data.length)).style.cssText += "background:black"
    }
    timer = setInterval(go, time, 1)
    // 鼠标滑进轮播图停止滚动
    obj.mouseover(() => {
        svgRL.css("display","flex")
        clearInterval(timer)
        
    })
    // 鼠标画出开始滚动
    obj.mouseleave(() => {
        svgRL.css("display","none")
        timer = setInterval(go, time, 1)
    })
    //分页下标点击事件
    obj.children("ul").last().children("li").click(function() {
        index = 0;
        go($(this).index())

    })

    $(svgRL[0]).click(function(){
        go(1)
    })
    $(svgRL[1]).click(function(){
      go(-1)
    
    })

}