首页 > 代码库 > jquery.transform
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"><</a> <a class="rightbt">></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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。