图片倾斜展示旋转轮播插件基于jQuery.transform插件-插件特效-星河码客

HTML代码很简洁

需要引用jQuery.transform插件最后js调用var loop=(function(){ var $btnl=$(".btnleft"), $btnr=$(".btnright"), $list=$("#test ul li"), origin=['125px','400px'], origin1=['125px','700px'], imgIndex=0, animate=false; var arrimg=creatimg([['img/9.jpg','img/10.jpg','img/11.jpg','img/12.jpg'],['img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg'],['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],['img/13.jpg','img/14.jpg','img/15.jpg','img/16.jpg']]); function bibao(){ config(); setevent(); } function config(){ var chushi=-6, angel=6; $list.transform({origin:origin}); $list.each(function(i){ $(this).transform({rotate:chushi+(i*angel)+"deg"}); //$(this).transform({rotate: '15deg'}); }) } function setevent(){ /*var t=setTimout(function(){ loop1(); },1000)*/ clearInterval(loop3); var loop3=setInterval(function(){ loop1(); },2500); $(".btnright").bind("click",function(){ clearInterval(loop3); var t=setTimeout(function(){ clearInterval(loop3); loop3=setInterval(function(){ loop1(); },3000); },1200); if(animate){ //animate=false; return false; } animate=true; loop1(); }); // if(!$new_img.is(":animated")){ //clearInterval(t); // clearTimeout(t); function loop1(){ //alert(1); imgIndex+=1; if(imgIndex>3){ imgIndex=0; } $list.each(function(i){ var $this=$(this); var $old_img=$this.children('img'); // alert(arrimg[imgIndex][i]); var $new_img=$(arrimg[imgIndex][i]); // alert(arrimg[imgIndex][i]); $this.append($new_img); $old_img.transform({origin:origin1}); $new_img.transform({origin:origin1,rotate:"-45deg"}); setTimeout(function(){ $old_img.animate({rotate:"45deg"}); $new_img.animate({rotate:"0deg"},500,function(){ $old_img.remove(); if(i*200==600){ setTimeout(function(){animate=false;},600); } });},i*200) }) } //return loop1; $(".btnleft").bind("click", function(){ //if($new_img.is(":animated")){return false;} clearInterval(loop3); var t=setTimeout(function(){ animate=false; clearInterval(loop3); loop3=setInterval(function(){ loop1(); },3000); },1200); if(animate){ return false; } animate=true; loop2(); //return loop2(); }); function loop2(){ imgIndex+=(-1); if(imgIndex<0){ imgIndex=3; } $list.each(function(i){ var $this=$(this); var $old_img=$this.children('img'); // alert(arrimg[imgIndex][i]); var $new_img=$(arrimg[imgIndex][i]); // alert(arrimg[imgIndex][i]); $this.append($new_img); $old_img.transform({origin:origin1}); $new_img.transform({origin:origin1,rotate:"45deg"}); setTimeout(function(){$old_img.animate({rotate:"-45deg"}); $new_img.animate({rotate:"0deg"},500,function(){ $old_img.remove(); });},(3-i)*200) }); } } function creatimg(arr){ var img_handle=[]; for(var i in arr){ img_handle[i]=[]; for(var j in arr[i]){ img_handle[i][j]=new Image(); img_handle[i][j].src=arr[i][j]; } } return img_handle; } return bibao; })();loop();

图片倾斜展示旋转轮播插件基于jQuery.transform插件

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»