jquery.transform

Posted 2020-08-09 敢问

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery.transform相关的知识，希望对你有一定的参考价值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery.transform</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="mainbox">
        <ul>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
            <li><img src="4.jpg" alt=""></li>
            <div class="clear"></div>
        </ul>
        <div class="btnbox">
            <a class="leftbt">&lt</a>
            <a class="rightbt">&gt</a>
            <a class="topbt">play</a>
        </div>
        <h2>多图旋转轮播效果</h2>
    </div>
</body>
<script src="http://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script src="jquery.transform-0.9.3.min_.js"></script>
<script src="index.js"></script>
</html>

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
}
.mainbox {
    width: 1000px;
    height: 515px;
    margin: 0 auto;
    box-shadow: 0px 0px 5px #000;
    margin-top: 200px;
    overflow: hidden;
    position: relative;
}
.mainbox h2{
    position: absolute;
    bottom: 20px;
    right: 50px;
    background: rgba(255,255,255,0.6);
    padding: 10px;
    letter-spacing: 0.6em;
}
.mainbox .btnbox a{
    position: absolute;
    display: block;
    opacity: 0.6;
    cursor: pointer;
}
.mainbox .btnbox a:hover{
    opacity: 1;
}
.mainbox .btnbox .leftbt{
    left: 20px;
    top: 50%;
    color: #fff;
    font-size: 60px;
    margin-top: -30px;
}
.mainbox .btnbox .rightbt{
    right: 20px;
    top: 50%;
    color: #fff;
    font-size: 60px;
    margin-top: -30px;
}
.mainbox .btnbox .topbt{
    top: 0px;
    left: 20px;
    color: #000;
    font-size: 10px;
    border: 1px solid #999;
    padding: 5px;
}
.mainbox ul li{
    float: left;
    width: 25%;
    height: 465px;
    overflow: hidden;
    border: 25px solid #fff;
    margin-left: -50px;
    position: relative;
}
.mainbox ul li img{
    position: absolute;
    width: 310px;
    height: 465px;
}
.clear{
    clear: both;
}

var loopPlayerInit = (function(){
    var $leftbt = null,
        $rightbt = null,
        $topbt = null,
        $imglist = null,
        origin = [‘125px‘,‘500px‘],
        imgOrign = [‘180px‘,‘900px‘],
        imgAll = createImg([[‘1.jpg‘,‘2.jpg‘,‘3.jpg‘,‘4.jpg‘],[‘5.jpg‘,‘6.jpg‘,‘7.jpg‘,‘8.jpg‘],[‘9.jpg‘,‘10.jpg‘,‘11.jpg‘,‘12.jpg‘],[‘13.jpg‘,‘14.jpg‘,‘15.jpg‘,‘16.jpg‘]]),
        imgArrIndex=0,
        imgAng = 45,
        imgTime = 100,//初始时间
        rotating = false,//初始旋转状态
        autoTime = null,//存储定时器
        autoInterval = 3000;//自动播放时间间隔



    function init(){
        $leftbt = $(".leftbt"),
        $rightbt = $(".rightbt"),
        $topbt = $(".topbt"),
        $imglist = $(".mainbox ul li");

        configer();//旋转角度和旋转点
        setEvent();//添加事件
    }
    function configer(){//旋转角度和旋转点
        var ang = 6,
            aint = -6;
        $imglist.transform({origin:origin});
        $imglist.each(function(i){
            var $this = $(this);
            $this.transform({rotate:aint + (i*ang) + "deg"});
        })
    }

    function setEvent(){//添加事件
        $leftbt.bind("click",function(){
            //alert(imgAll[imgArrIndex][i])
            anigo(-1);//旋转函数
            return false;
        });

        $rightbt.bind("click",function(){
            anigo(1);
            return false;
        });

        $topbt.bind("click",function(){
            var play = "play",
                pause = "pause",
                $but = $(this);
            if($but.text()=="play"){
                $but.text(pause);
                autoGo();
            }else{
                $but.text(play);
                autoStop();
            }
            return false;
        });
    }

    function createImg(arr){//生成图片
        var imgArr = [];
        for(var i in arr){
            imgArr[i] = [];
            for(var j in arr[i]){
                imgArr[i][j] = new Image();
                imgArr[i][j].src = arr[i][j];
            }
        }
        return imgArr;
    }

    function anigo(d){
        if(rotating) return false;//若动画在执行直接return
        rotating = true;
        imgArrIndex+=d;
        if(imgArrIndex>imgAll.length-1){
            imgArrIndex = 0;
        }else if (imgArrIndex<0) {
            imgArrIndex = imgAll.length-1;
        };
        $imglist.each(function(i){
            var $thisItem = $(this);//遍历出的li
            var $thisimg = $thisItem.children("img");//li 下面原始img
            var $targetImg=$(imgAll[imgArrIndex][i]);//取出图片
            var thisTime=(d===1)?imgTime*i:imgTime*($imglist.length-1-i);//往右转i=3的延迟时间最长，往左转i=0的延迟时间最长；
            $thisItem.append($targetImg);//替换图片
            $thisimg.transform({origin:imgOrign});
            $targetImg.transform({origin:imgOrign,rotate:(0-d)*imgAng + "deg"});
            setTimeout(function() {
                $thisimg.animate({rotate:imgAng*d + "deg"});
                $targetImg.animate({rotate:"0deg"},500,function(){
                    $thisimg.remove();
                    if(thisTime==(($imglist.length-1)*imgTime)){
                        rotating = false;
                    }
                });
            },thisTime)    
        })
    }

    function autoGo(){
        clearInterval(autoTime);
        anigo(1);
        autoTime = setInterval(function(){
            anigo(1);
        },autoInterval)
    }

    function autoStop(){
        clearInterval(autoTime)
    }
    
    return init;
})()
loopPlayerInit();

以上是关于jquery.transform的主要内容，如果未能解决你的问题，请参考以下文章

jQuery transform/action类型静态工具方法探究

微信小程序代码片段

VSCode自定义代码片段——CSS选择器

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

片段和活动之间的核心区别是啥？哪些代码可以写成片段？

VSCode自定义代码片段——.vue文件的模板