<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery不同风格图片排列轮播切换 - 网页模板</title>
<style>
*{
padding:0;
margin:0;
font-family:'微软雅黑';
}
#test{
width:1000px;
height:350px;
margin:0 auto;
top:30px;
position:relative;
overflow:hidden;
}
#test ul li{
list-style:none;
float:left;
border:#FFF solid 20px;
margin-left:-40px;
overflow:hidden;
width:250px;
height:350px;
position:relative;
}
#test ul li img{
position:absolute;}
.btnleft{
position:absolute;
left:10px;
top:155px;
font-size:50px;
color:#FFF;
opacity:0.5;
}
.btnright{
position:absolute;
right:35px;
top:155px;
font-size:50px;
color:#FFF;
opacity:0.5;
}
.btngroup span:hover{
opacity:1;
cursor:pointer;
}
</style>
</head>
<body>
<div id="test">
<ul>
<li><img src="img/9.jpg"></li>
<li><img src="img/10.jpg"></li>
<li><img src="img/11.jpg"></li>
<li><img src="img/12.jpg" ></li>
</ul>
<div class="btngroup">
<span class="btnleft"><</span>
<span class="btnright">></span>
</div>
</div>
<!------------------------>
<script src="jquery.min.js"></script>
<script src="jquery.transform-0.9.3.min_.js"></script>
<script>
$(document).ready(function(e) {
// $("#test").animate({rotate:"45deg"});
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();
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery不同风格图片排列轮播切换.zip （20个子文件） 
jQuery不同风格图片排列轮播切换 
jQuery不同风格图片排列轮播切换.jpg 75KB jiaoben3956 
jquery.min.js 93KB img 8.jpg 122KB 15.jpg 100KB 14.jpg 127KB 2.jpg 93KB 1.jpg 81KB 6.jpg 140KB 3.jpg 91KB 5.jpg 144KB 11.jpg 108KB 4.jpg 114KB 10.jpg 121KB 13.jpg 78KB 16.jpg 81KB 12.jpg 151KB 9.jpg 122KB 7.jpg 127KB jquery.transform-0.9.3.min_.js 20KB
index.html 5KB资源评论
