轮播图工厂函数

最新推荐文章于 2021-12-16 14:01:57 发布

YangjulongTrue

最新推荐文章于 2021-12-16 14:01:57 发布

阅读量436

点赞数 3

文章标签： js jquery

本文链接：https://blog.youkuaiyun.com/YangjulongTrue/article/details/103638330

版权

最近要做中期项目,发现页面都是轮播图于是写了一个制作轮播图的工厂函数新人第一次写
希望，对你们有用需要jquery 下面有原生的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .jian{
            position: absolute;
            z-index: 10;
            top: 50%;
            width: 30px;
            height: 40px;
            display: block;
            background: rgba(0,0,0,.1);
            text-decoration: none;
            line-height: 40px;
            text-align: center;
            cursor: pointer;
            color: white;
            font-size: 20px;
            font-weight: 900;
        }
        .rightjiao{
            right: 0px;
        }

        .leftjiao{
            left: 0px;
        }
         img{
            width: 300px;
            height: 300px;
        }
        .parent{
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }
        .left-float{
            float: left;
        }
        .clear:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div class="parent">
<ul class="lunbaodzx clear">
    <li class="left-float"><img src="123.png" alt=""></li>
    <li class="left-float"><img src="123.png" alt=""></li>
    <li class="left-float"><img src="123.png" alt=""></li>
</ul>
</div>

</body>
<script src="../jquery-1.12.4.js"></script>
<script>
    FunA();
    function FunA() {
        //创建轮播的集合
        $(".lunbaodzx").each(function (i,n) {
            Lunbotu($(n));
        });
    }
    /* @param element
    * @ 传入需要移动的盒子
    */
    function Lunbotu(element) {
        let parentz =element.parent();
        //获取该元素父级
        parentz.css("position", "relative");
        parentz.css("overflow", "hidden");
        //设置 父级定位
        element.append(element.children()[0].cloneNode(true));
        //克隆 第一个 到 后面
        let shu=element.children().length;
        // 获取子元素的长度
        element.width(shu*parentz.width());
        // 移动盒子的宽等于 子 数量乘 他父级的宽
        element.css("position","absolute");
        // 移动盒子的 定位
        element.indexz=0;
        // 自定义属性 存放 下标
        let leftjiao=$('<span class="jian leftjiao">&lt;</span>');
        // 左边的小箭头
        leftjiao.click(function () {
            element.indexz--;
            // 进来就下标减一
            if(element.indexz<0){
                //如果是第一张图 立刻 到 最后一张  看起来是第一张
                element.css("left",(shu-1)*-parentz.width());
                element.indexz=shu-2;
                //下一次 就是 长度 -2 我是后获取的所以 -2
            }
            move(element.get(0),element.indexz*-parentz.width());
        });
        var rightjiao=$('<span class="jian rightjiao">&gt;</span>');
        rightjiao.click(function () {
            element.indexz++;
            if(element.indexz===shu){
                //如果是最后一张 马上 是 0 第一
                element.css("left",0);
                element.indexz=1;
                // 下标为1
            }
            move(element.get(0),element.indexz*-parentz.width());
        });
        parentz.append(leftjiao);
        parentz.append(rightjiao);
        // 追加 到 父级
        parentz.hover(function () {
            $(this).children(".jian").css("background","black");
        },function () {
            $(this).children(".jian").css("background","");
        });
        //悬浮样式
    }
    function move(element, target) {
        //把定时器值封装到对象的属性里 刚来 就清除
        clearInterval(element.timeId);
        var step = 15;//步进值
        element.timeId = setInterval(function () {
            var current = element.offsetLeft; //获取 相对与父级 left值
            if (Math.abs(current - target) > Math.abs(step)) {
                //之间距离 大于 步进值 就 老老实实的动
                current += current < target ? step : -step;
                element.style.left = current + "px";
            } else {
                // 直接到目标
                clearInterval(element.timeId);
                element.style.left = target + "px";
            }
        }, 10);
    }
</script>
</html>

下面的原生js写的原生js写起来好麻烦的说没有考虑什么兼容性
样式还是上面的。。。

</head>
<body>
<div class="parent" style="width: 300px;">
<ul class="lunbaodzx clear">
    <li class="left-float"><img src="123.png" alt=""></li>
    <li class="left-float"><img src="123.png" alt=""></li>
    <li class="left-float"><img src="123.png" alt=""></li>
</ul>
</div>
</body>
<script>
    Lunbotu(document.getElementsByClassName("lunbaodzx")[0]);

    /* @param element
    * @ 传入需要移动的盒子
    */
    function Lunbotu(element) {
        let parentz =element.parentElement;
        //获取该元素父级
        parentz.setAttribute("style", parentz.getAttribute("style")+"position:relative;overflow:hidden");
        //设置 父级定位
        element.appendChild(element.children[0].cloneNode(true))
        //克隆 第一个 到 后面
        let shu=element.childElementCount;
        let width2 = parentz.style.width;
        let pwidth=parseInt(parentz.style.width.substring(0, width2.length - 2));
        // 获取子元素的长度
        // 移动盒子的宽等于 子 数量乘 他父级的宽
        element.setAttribute("style", "width:"+(shu*pwidth)+"px;position:absolute");
        // 移动盒子的 定位
        element.indexz=0;
        // 自定义属性 存放 下标

        let leftjiao=document.createElement("span");
        leftjiao.className="jian leftjiao";
        leftjiao.innerHTML='&lt;';
        // 左边的小箭头
        leftjiao.onclick=()=>f(true,element,shu,pwidth);

        let rightjiao=document.createElement("span");
        rightjiao.className="jian rightjiao";
        rightjiao.innerHTML='&gt;';
        //右边的
        rightjiao.onclick=()=>f(false,element,shu,pwidth);
        parentz.appendChild(leftjiao);
        parentz.appendChild(rightjiao);
    }
    function move(element, target) {
        //把定时器值封装到对象的属性里 刚来 就清除
        clearInterval(element.timeId);
        let step = 15;//步进值
        element.timeId = setInterval(function () {
            let current = element.offsetLeft; //获取 相对与父级 left值
            if (Math.abs(current - target) > Math.abs(step)) {
                //之间距离 大于 步进值 就 老老实实的动
                current += current < target ? step : -step;
                element.style.left = current + "px";
            } else {
                // 直接到目标
                clearInterval(element.timeId);
                element.style.left = target + "px";
            }
        }, 10);
    }
    function f(flag,element,shu,pwidth) {
        if(flag) element.indexz--;
        else  element.indexz++;
        if(element.indexz<0){
            //如果是第一张图 立刻 到 最后一张  看起来是第一张
            element.style.left=(shu-1)*-pwidth+"px";
            element.indexz=shu-2;
            //下一次 就是 长度 -2 我是后获取的所以 -2
        }else if(element.indexz===shu){
            element.style.left="0px";  //如果是最后一张 马上 是 0 第一
            element.indexz=1;  // 下标为1
        }
        move(element,element.indexz*-pwidth);
    }

</script>
</html>