jquery1.7实现图片动画浏览
效果截图：
页面部分代码：
页面部分代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery</title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<link rel="stylesheet" href="css/glob.css" type="text/css"></link>
<script type="text/javascript">
$(function(){
var myphoto = ["bimg1.jpg","bimg2.jpg","bimg3.jpg","bimg4.jpg","bimg5.jpg","bimg6.jpg","bimg7.jpg","bimg8.jpg","bimg9.jpg"];
$('#photo').css({
'width':'800',
'margin':'0px auto'
});
$('#photo div:eq(0)').css({
'width':'100px',
'float':'left',
'border':'0px solid red',
'font-size':'100px',
'margin-top':'240px',
'text-align':'center',
'background-color':'#333333',
'color':'#7D7D7D',
'filter':'alpha(opacity=80)',
'cursor':'pointer',
'display':'none'
}).click(function(){
beforePhoto();
});
var i = 0;
$('#photo div:eq(2)').css({
'width':'100px',
'float':'right',
'border':'0px solid red',
'font-size':'100px',
'margin-top':'240px',
'text-align':'center',
'background-color':'#333333',
'color':'#7D7D7D',
'filter':'alpha(opacity=80)',
'cursor':'pointer',
'display':'none',
'alt':'下一张'
}).click(function(){
nextPhoto();}
);
/*下一张图片*/
var nextPhoto=function(){
if(!$('#photo div:eq(1) img').is(":animated")){
if(i<myphoto.length-1)i++;
$('#photo div:eq(1) img').slideUp(500);
$('#photo div:eq(1) img').attr("src","images/"+myphoto[i]);
$('#photo div:eq(1) img').slideDown();
}
}
/*前一张图片*/
var beforePhoto=function(){
if(!$('#photo div:eq(1) img').is(":animated")){
if(i>0)i--;
$('#photo div:eq(1) img').fadeOut(500);
$('#photo div:eq(1) img').attr("src","images/"+myphoto[i]);
$('#photo div:eq(1) img').fadeIn(500);
}
}
$('#photo div:eq(1)').css({
'width':'800px',
'float':'left',
'border':'0px solid red',
'position':'absolute',
'text-align':'center',
'z-index':'-1',
'background-color':'#7D7D7D'
});
$('#photo div:eq(1) img').css({
'height':'600px',
});
$('#photo div:eq(1) img').attr('scr',"images/"+myphoto[i]);
$('#photo div:eq(1)').on({
'mousemove':function(e){
//$("#info").text(e.pageX+"-----"+e.pageY+" -->"+$(this).position().left+"----"+$(this).position().top);
//$("#info").text((e.pageX-$(this).position().left)+"-----"+(e.pageY-$(this).position().top));
if((e.pageX-$(this).position().left)<300){
//alert("left");
$('#photo div:eq(0)').fadeIn(500);
$('#photo div:eq(2)').fadeOut(500);
}else if((e.pageX-$(this).position().left)>500){
$('#photo div:eq(2)').fadeIn(500);
$('#photo div:eq(0)').fadeOut(500);
}else{
$('#photo div:eq(2)').fadeOut();
$('#photo div:eq(0)').fadeOut();
}
}
});
/*键盘按下事件*/
$(document).keydown(function(event){
if(event.keyCode == 37){
//alert("left");
beforePhoto();
}else if(event.keyCode == 39 ){
//alert("right");
nextPhoto();
}
});
});
</script>
</head>
<body>
<div id='info'></div>
<div id='photo'>
<div>
<
</div>
<div>
<img src='images/bimg1.jpg' />
</div>
<div>
>
</div>
</div>
</body>
</html>