jquery特效之图片轮播

kankan231

于 2013-04-10 19:25:19 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/kankan231/article/details/8784726

版权

先上代码

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>幻灯片</title>
<style type="text/css">
*{padding:0;margin:0;}
#wrap{
	width:960px;
	height: 500px;
	margin: 60px auto;
	background: #444444;
	position: relative;
	border-radius: 5px;
	box-shadow:5px 5px 5px rgba(0,0,0,.6);
}
#wrap img{
	border:1px solid #fff;
	position:absolute;
}
#wrap span{
	width:62px;
	height:46px;
	position: absolute;
	cursor: pointer;
}
#pre{
	background:transparent url(images/but_.png) 0px 0px no-repeat;
	top: 150px;
	right: 30px;
}
#next{
	background:transparent url(images/but_.png) 0px -46px no-repeat;
	top: 260px;
	right: 30px;
}
</style>
<script type="text/javascript" src="Jquery.js"></script>
<script type="text/javascript">
	var imgs=null;//图片集合
	var size=0;//图片张数
	var dsq=null;//定时器
	var locations = [];//locations[i]代表第i张图片所在位置
	//这个数组表示每个位置图片的定位样式
	data=[
			{	
				width:'700px',
				height:'180px',
				left:'130px',
				top:'10px',
				zIndex:'5'
			},
			{
				width:'700px',
				height:'180px',
				left:'80px',
				top:'50px',
				zIndex:'50'
			},
			{
				width:'700px',
				height:'280px',
				left:'20px',
				top:'100px',
				zIndex:'100'
			},
			{
				width:'700px',
				height:'180px',
				left:'80px',
				top:'260px',
				zIndex:'50'
			},
			{
				width:'700px',
				height:'180px',
				left:'130px',
				top:'300px',
				zIndex:'5'
			}
		];
		
	$(document).ready(function(){
		init();//初始化
	});
	
	function init(){
		imgs = $("#wrap img");
		imgs.css({width:'0px',height:'0px',top:'250px',left:'10px'});
		size=imgs.length;
		for(var i=0;i<size;i++)
			locations[i]=i+1;
		position_img();
		//添加按钮点击事件
		$("#pre").click(function(){
			handle_click('next');
		});
		$("#next").click(function(){
			handle_click('pre');
		});
		//添加定时器
		dsq=setInterval(play,4000);
	}
	
	function play(){
			slide('pre');
	}
	
	//对图片进行定位
	function position_img(){
		for(var i=0;i<size;i++){
			$(imgs[i]).animate(data[locations[i]-1],'slow');
		}
	}
	
	根据动作改变每张图片的位置值
	function slide(type){
		if(type=='pre'){
			
			for(var i=0;i<size;i++){
				locations[i] += 1;
				if(locations[i]>size)
					locations[i]=1;
			}
		}else if(type=='next'){
			
			for(var i=0;i<size;i++){
				locations[i] -= 1;
				if(locations[i]<1)
					locations[i]=size;
			}
		}
		
		position_img();
	}
	
	//处理向上，向下的点击事件
	function handle_click(type){
	
		clearInterval(dsq);//当点击时暂时清除定时器
		slide(type);
		dsq=setInterval(play,4000);//恢复定时器
	}
</script>
</head>
<body>
<div id="wrap">
	<img src="images/1.jpg"/>
	<img src="images/2.jpg"/>
	<img src="images/3.jpg"/>
	<img src="images/4.jpg"/>
	<img src="images/5.jpg"/>
	<span id="pre" title="上一张"></span>
	<span id="next" title="下一张"></span>
</div>
</body>
</html>

这一张是效果的一个截图