首页 > 代码库 > jquery.transform

jquery.transform

2024-08-14 01:20:38   218人阅读

<!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


联系
我们