<!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();