使用Jquery实现图片轮播效果

浏览数：13 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery实现图片轮播</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width:600px;height:240px;position: relative;}
#pic{width:600px;height:240px;position: relative;top:0px;left:0px;}
img{position: absolute;}/* 将三个图片层叠在一起 */
#but{ width:120px; height:25px;position: absolute;
border: 1px solid #3ff;bottom:5px; right: 0px;}
#but ul li{list-style:none;width:25px; height:25px; float:left;background:#ccff99; 
		border-radius:15px;text-align:center; line-height:20px;margin-right: 5px;
}
#but ul .sel{background: #ccffff;}
</style>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
	$(function(){
		var index = 0,begin = null;
		var picNums = $("#pic img").length;
			
		$("#but ul li").hover(function(){
			
			clearInterval(begin);//鼠标移上,清除定时器对象
			
			$(this).addClass("sel").siblings().removeClass("sel");
			index = $("#but ul li").index();
			$("#pic img").eq(index).show().siblings().hide();
			
		},function(){auto();});//鼠标移走执行auto函数,执行定时器
		
		function auto(){
			begin = setInterval(function(){//定时器,每秒转换图片
				index++;
				if(picNums == index){
					index = 0;
				}
			$("#but ul li").eq(index).addClass("sel").siblings().removeClass("sel");
			$("#pic img").eq(index).show().siblings().hide();
			}, 1000);
		}
		auto();
	})
</script>
</head>
<body>
	<div id="box">
		<div id="pic">
			<img src="imgs/1.jpg" width= 600 height=240/>
			<img src="imgs/2.jpg" width= 600 height=240/>
			<img src="imgs/3.jpg" width= 600 height=240/>
		</div>
		<div id="but">
			<ul>
				<li class="sel">1</li>
				<li class="">2</li>
				<li class="">3</li>
			</ul>
		
		</div>
	</div>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

使用Jquery实现图片轮播效果