Jquery多种图片轮滚特效

来源：互联网发布：淘宝即时通讯工具编辑：程序博客网时间：2024/05/17 06:43

5种超酷的Jquery轮换特效融为一体。

<script type="text/javascript">
$(document).ready(function(e) {
ImgRotation.Parent = $("#MainDiv");
ImgRotation.Initialize();
});
var ImgRotation = {
Parameters: [{
width: "400",
height: "250"
}],
Parent: null,
Mainchild: null,
tips: null,
index: 0,
dJson: [{
imgTips: "img1",
imgUrl: "img1.jpg"
}, {
imgTips: "img2",
imgUrl: "img2.jpg"
}, {
imgTips: "img3",
imgUrl: "img3.jpg"
}, {
imgTips: "img4",
imgUrl: "img4.jpg"
}, {
imgTips: "img5",
imgUrl: "img5.jpg"
}],
Initialize: function() {
if (ImgRotation.Parent == null) {
ImgRotation.Parent = $(document.body);
}
ImgRotation.Mainchild = $("<div id=\"container\"></div>");
ImgRotation.Parent.append(ImgRotation.Mainchild);
tips = $("<div id=\"tips\"></div>");
tips.css("color", "#fff").css("padding-left", "10px").css("padding-top", "10px");
tips.css("width", ImgRotation.Parameters[0].width "px").css("height", "45px").css("background-color", "#333").css("opacity", "0.8").css("margin-top", ImgRotation.Parameters[0].height "px");
ImgRotation.Mainchild.append(tips);
ImgRotation.Mainchild.hover(function() {
tips.animate({
marginTop: ImgRotation.Parameters[0].height - 45 "px"
}, 500)
}, function() {
tips.animate({
marginTop: ImgRotation.Parameters[0].height "px"
}, 500)
});
ImgRotation.Animate();
},
Clear: function() {
$(".item").remove();
},
Animate: function() {
switch(ImgRotation.index){
case 0:
ImgRotation.RoationA();
break;
case 1:
ImgRotation.RoationB();
break;
case 2:
ImgRotation.RoationC();
break;
case 3:
ImgRotation.RoationD();
break;
case 4:
ImgRotation.RoationE();
break;
}
ImgRotation.index ;
},
RoationA: function() {
ImgRotation.index = 0;
tips.html(ImgRotation.dJson[ImgRotation.index].imgTips);
var bgLeft = $("<div class=\"item\" id=\"bgLeft\"></div>");
bgLeft.css("width", ImgRotation.Parameters[0].width / 2 "px").css("height", ImgRotation.Parameters[0].height "px").css("position", "absolute").css("background-image", 'url(' ImgRotation.dJson[ImgRotation.index].imgUrl ')').css("margin-left", -ImgRotation.Parameters[0].width / 2 "px");
var bgRifht = $("<div class=\"item\" id=\"bgRifht\"></div>");
bgRifht.css("width", ImgRotation.Parameters[0].width / 2 "px").css("height", ImgRotation.Parameters[0].height "px").css("position", "absolute").css("margin-left", ImgRotation.Parameters[0].width "px").css("background-image", 'url(' ImgRotation.dJson[ImgRotation.index].imgUrl ')').css("background-positionX", -ImgRotation.Parameters[0].width / 2 "px");
ImgRotation.Mainchild.append(bgLeft);
ImgRotation.Mainchild.append(bgRifht);
bgLeft.animate({
marginLeft: "0px"
}, 200, function() {
$(this).animate({
marginLeft: "-100px"
}, 250, function() {
$(this).animate({
marginLeft: "0px"
}, 100, function() {
$(this).animate({
marginLeft: "-50px"
}, 100, function() {
$(this).animate({
marginLeft: "0px"
}, 50);
});
})
});
});
bgRifht.animate({
marginLeft: ImgRotation.Parameters[0].width / 2 "px"
}, 200, function() {
var basicLeft = ImgRotation.Parameters[0].width / 2;
$(this).animate({
marginLeft: basicLeft 100 "px"
}, 250, function() {
$(this).animate({
marginLeft: basicLeft "px"
}, 100, function() {
$(this).animate({
marginLeft: basicLeft 50 "px"
}, 100, function() {
$(this).animate({
marginLeft: basicLeft "px"
}, 50);
});
});
});
});
},
RoationB: function() {
ImgRotation.Clear();
ImgRotation.index = 1;
tips.html(ImgRotation.dJson[ImgRotation.index].imgTips);
for (var i = 0; i < 10; i ) {
var mWidth = ImgRotation.Parameters[0].width / 10;
var mImgC = $("<div class=\"item rotationB\"></div>");
$(mImgC).css({
"width": mWidth "px",
"height": ImgRotation.Parameters[0].height "px",
"background-image": 'url(' ImgRotation.dJson[ImgRotation.index].imgUrl ')',
"background-positionX": -mWidth * i "px",
"position": "absolute",
"margin-left": mWidth * i "px",
"margin-top": -ImgRotation.Parameters[0].height "px"
});
ImgRotation.Mainchild.append(mImgC);
mImgC.animate({
marginTop: "0px"
}, 300 i * 100);
}
},
RoationC: function() {
ImgRotation.Clear();
ImgRotation.index = 2;
tips.html(ImgRotation.dJson[ImgRotation.index].imgTips);
for (var i = 0; i < 10; i ) {
var mHeight = ImgRotation.Parameters[0].height / 10;
var mImgC = $("<div class=\"item\"></div>");
$(mImgC).css({
"width": ImgRotation.Parameters[0].width "px",
"height": mHeight "px",
"background-image": 'url(' ImgRotation.dJson[ImgRotation.index].imgUrl ')',
"background-positionY": -mHeight * i "px",
"position": "absolute",
"margin-top": mHeight * i "px",
"margin-left": -ImgRotation.Parameters[0].width "px"
});
ImgRotation.Mainchild.append(mImgC);
mImgC.animate({
marginLeft: "0px"
}, 300 i * 100);
}
},
RoationD: function() {
ImgRotation.Clear();
ImgRotation.index = 3;
tips.html(ImgRotation.dJson[ImgRotation.index].imgTips);
mWidth = ImgRotation.Parameters[0].width / 4;
mHeight = ImgRotation.Parameters[0].height / 3;
for (var i = 0; i < 12; i ) {
var mImgC = $("<div class=\"item\"></div>");
$(mImgC).css({
"width":"0px",
"height":"0px",
"position": "absolute",
"background-image": 'url(' ImgRotation.dJson[ImgRotation.index].imgUrl ')'
});
ImgRotation.Mainchild.append(mImgC);
if (i >= 0 && i <= 3) {
$(mImgC).css({
"margin-top": "0px",
"margin-left": mWidth*i "px",
"background-positionX": -mWidth * i "px"
});
}else if(i>3&&i<=7){
$(mImgC).css({
"height":"0px",
"margin-top": mHeight "px",
"margin-left": mWidth*(i-4) "px",
"background-positionX": -mWidth * (i-4) "px",
"background-positionY": -mHeight "px"
});
}else{
$(mImgC).css({
"margin-top": mHeight*2 "px",
"margin-left": mWidth*(i-8) "px",
"background-positionX": -mWidth * (i-8) "px",
"background-positionY": -mHeight*2 "px"
});
}
mImgC.animate({width: mWidth "px",height:mHeight "px"}, 500 i * 50);
}
},
RoationE: function() {
ImgRotation.Clear();
ImgRotation.index = 4;
tips.html(ImgRotation.dJson[ImgRotation.index].imgTips);
mWidth = ImgRotation.Parameters[0].width / 4;
mHeight = ImgRotation.Parameters[0].height / 3;
for (var i = 0; i < 12; i ) {
var mImgC = $("<div class=\"item\"></div>");
$(mImgC).css({
"width":mWidth "px",
"height":mHeight "px",
"opacity":"0",
"position": "absolute",
"background-image": 'url(' ImgRotation.dJson[ImgRotation.index].imgUrl ')'
});
ImgRotation.Mainchild.append(mImgC);
if (i >= 0 && i <= 3) {
$(mImgC).css({
"margin-top": "0px",
"margin-left": mWidth*i "px",
"background-positionX": -mWidth * i "px"
});
}else if(i>3&&i<=7){
$(mImgC).css({
"margin-top": mHeight "px",
"margin-left": mWidth*(i-4) "px",
"background-positionX": -mWidth * (i-4) "px",
"background-positionY": -mHeight "px"
});
}else{
$(mImgC).css({
"margin-top": mHeight*2 "px",
"margin-left": mWidth*(i-8) "px",
"background-positionX": -mWidth * (i-8) "px",
"background-positionY": -mHeight*2 "px"
});
}
mImgC.animate({opacity:1}, 500 i * 300);
}
}
}
</script>

0 0