<!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();
时间： 2024-08-03 08:06:34