Slide tự động phóng to, thu nhỏ các ảnh tại cùng 1 vị trí.
Code full
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="Author" content="Bruce Myles" />
<link href="css/jquery_picture_zoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script>
var counter=1;
var picture_width=300;
var picture_height=225;
var picture_center_top = picture_height/2;
var picture_center_left = picture_width/2;
$(document).ready(function() {
// do stuff when DOM is ready
$('#zoom_image_1').css("top",picture_center_top);
$('#zoom_image_1').css("left",picture_center_left);
$('#zoom_image_2').css("top",picture_center_top);
$('#zoom_image_2').css("left",picture_center_left);
$('#zoom_image_3').css("top",picture_center_top);
$('#zoom_image_3').css("left",picture_center_left);
$('#zoom_image_4').css("top",picture_center_top);
$('#zoom_image_4').css("left",picture_center_left);
$('#zoom_image_5').css("top",picture_center_top);
$('#zoom_image_5').css("left",picture_center_left);
animate_banner();
});
function animate_banner()
{
if(counter==1)
{
counter=0;
//I want the image coming into view to be on top during the transition, so I set image 5 to the bottom $('#zoom_image_5').css("z-index","0");
$('#zoom_image_5').animate({width:0,top:picture_center_top,left:picture_center_left},6000);
$('#zoom_image_1').animate({width:300,top:0,left:0},6000, function () {counter=2;animate_banner();}
)
}
if(counter==2)
{
counter=0;
$('#zoom_image_1').animate({width:0,top:picture_center_top,left:picture_center_left},6000);
$('#zoom_image_2').animate({width:300,top:0,left:0},6000, function () {counter=3;animate_banner();}
)
}
if(counter==3)
{
counter=0;
$('#zoom_image_2').animate({width:0,top:picture_center_top,left:picture_center_left},6000);
$('#zoom_image_3').animate({width:300,top:0,left:0},6000, function () {counter=4;animate_banner();}
)
}
if(counter==4)
{
counter=0;
$('#zoom_image_3').animate({width:0,top:picture_center_top,left:picture_center_left},6000);
$('#zoom_image_4').animate({width:300,top:0,left:0},6000, function () {counter=5;animate_banner();}
)
}
if(counter==5)
{
counter=0;
//I want the image coming into view to be on top during the transition, so I set image 5 to the top $('#zoom_image_5').css("z-index","2");
$('#zoom_image_4').animate({width:0,top:picture_center_top,left:picture_center_left},6000);
$('#zoom_image_5').animate({width:300,top:0,left:0},6000, function () {counter=1;animate_banner();}
)
}
}
</script>
</head>
<body>
<div class="zoom_fade_image">
<img id="zoom_image_1" class="zoom_image" src="images/ps3/1.jpg" />
<img id="zoom_image_2" class="zoom_image" src="images/ps3/2.jpg" />
<img id="zoom_image_3" class="zoom_image" src="images/ps3/3.jpg" />
<img id="zoom_image_4" class="zoom_image" src="images/ps3/4.jpg" />
<img id="zoom_image_5" class="zoom_image" src="images/ps3/5.jpg" />
</div>
</body>
</html>
