jquery1.7实现图片动画浏览

最新推荐文章于 2025-08-12 06:02:38 发布

iteye_1370

最新推荐文章于 2025-08-12 06:02:38 发布

阅读量122

点赞数

分类专栏： jQuery1.7.2 文章标签： jquery html ViewUI

jQuery1.7.2 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用jQuery库创建一个轮播图效果，包括图片切换、前后导航按钮及键盘控制，通过代码实例详细解释了实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果截图：
[img]http://dl.iteye.com/upload/picture/pic/120934/add52966-e6f9-33ad-87ee-8b79001e7297.png[/img]
页面部分代码：


<!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>