Jquery+timers插件实现图片轮转

于 2010-03-22 15:59:25 发布 · 100 阅读

标签

#jQuery #Flash #CSS #HTML #ViewUI

JavaScript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何使用JavaScript和jQuery实现轮转图片，并通过timers插件优化用户体验，包括图片淡显效果和导航功能。文章还指出当前实现的局限性，并邀请读者分享更多轮转图片的高级技巧。

很多网站上多有轮转图片，有的是用flash的，有的是用js的，前几天用了timers这个插件，感觉很不错，就试着写一下轮转图片。


<html>
<head>
<title>Round Images</title>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/jquery.timers.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var imgobj = $("#pic li a img");
		var img0 = imgobj[0].src;
		var text0 = imgobj[0].title;
		var imgIndex = 0;

		$("#text").html(text0);
		var numul = "";
		for(var i=0;i<imgobj.length;i++){
			if(i==0){
				numul +="<li class='on'>"+(i+1)+"</li>";
			}else{
				numul +="<li>"+(i+1)+"</li>";
			}
		};
		$("#num").html(numul);

		var numobj = $("#num li");

		$("#num li").click(function(){
			var liobj = $(this);
			$("#num li").removeClass();
			liobj.addClass("on");
			changeImg(liobj.text()-1);
			imgIndex = liobj.text()-1;
			$(document).stopTime();
			$(document).everyTime(3000, every);
		});

		$(this).everyTime(3000, every);

		function changeImg(index){

			if(index == 0){
				$(imgobj[0]).attr({src:img0,title:text0}).css({opacity: 0.1}).animate({opacity: 1.0},1000);
			}else{
				$(imgobj[0]).attr({src:$(imgobj[index]).attr("src"),title:$(imgobj[index]).attr("title")}).css({opacity: 0.1}).animate({opacity: 1.0},1000);
			}
			$("#text").html($(imgobj[0]).attr("title"));
		}

		function every(){
			imgIndex = (imgIndex+1)%imgobj.length;
			numobj.removeClass();
			$(numobj[imgIndex]).addClass("on");

			changeImg(imgIndex);
		}


	});


</script>
<style type="text/css">
	*
	{
		margin:0;
		padding:0;
	}
	img,img a
	{
		border:0;
	}
	body
	{
		height:900px;
		border:1px red solid;
	}
	 .focus
	 {
	 	width:400px;
	 	height:360px; 
	 	position:relative;
	 	border:1px solid #D8D9DA;
	 }

	/*标题*/
	.newindex_flash_bt
	{
		width:100%;
		height:35px;
		position:absolute;
		bottom:0px;
		left:0px;
		background:#000;
		-moz-opacity:0.5; 
		filter:alpha(opacity=50);
		z-index:1;
	}

	/*广告*/
	.newindex_flash_btfont
	{
		width:90%;
		height:35px;
		position:absolute;
		bottom:0px;
		left:10px;
		z-index:2; 
		color:#fff;
		padding:0px 30px 0px 50px; 
		background:url(../images/foc.gif) no-repeat 0px 10px;
		line-height:33px;
		font-weight:bold;
	}
	.newindex_flash_btfont a
	{
		color:#fff;
	}
	.newindex_flash_btfont a:visited
	{
		color:#fff;
	}
	.newindex_flash_btfont span
	{
		margin-left:15px;
	}

	.container, .container img
	{
		width:400px;
		height:360px;
	}
	.container
	{
		border:0px solid #333;
	}
	.container img
	{
		border:0;
	}
	.bottom
	{
		position:absolute; 
		bottom:0px;
		width:400px;
		filter: Alpha(Opacity=60);
    opacity: 0.6;  
    background-color:#000;
    height:30px;
    line-height:30px;
	}
	.text
	{
		float:left;
		padding-left:5px;
		font-size:14px;
		color:#fff !important
	}
	.num
	{ 
		float:right;
		padding-right:5px;
		margin:5px;
	}
	.num li
	{
		float:left;
		list-style:none;
		color: #fff;
		text-align: center;
		line-height: 16px;
		width: 16px;
		height: 16px;
		font-family: Arial;
		font-size: 12px;
		cursor: pointer;
		margin:1px;
		border: 1px solid #707070;
		background-color: #000;
	}
	.num li.on
	{	
		line-height: 18px;
		width: 18px;
		height: 18px;
		font-size: 14px;
		border: 0;
		background-color: #FEC702;	
		font-weight: bold;
	}
	.pic
	{
		width:400px;
		height:360px;
		overflow:hidden;
	}
	.pic li
	{
		list-style:none;
	}
</style>
</head>

<body>

	<div class="focus" style="left:200px;top:100px;">
	  <div class="container" id="idContainer2">
			<ul class="pic" id="pic">
				<li>
					<a href="http://www.g.cn" target="_blank">
						<img src="images/1.jpg" alt="图片1" width="400px" height="360px" title="图片1" />
					</a>
				</li>
				<li>
					<a href="http://www.163.com" target="_blank">
						<img src="images/2.jpg" alt="图片2" width="400px" height="360px" title="图片2" />
					</a>
				</li>
				<li>
					<a href="http://www.sina.com" target="_blank">
						<img src="images/3.jpg" alt="图片3" width="400px" height="360px" title="图片3" />
					</a>
				</li>
				<li>
					<a href="http://www.baidu.com" target="_blank">
						<img src="images/4.jpg" alt="图片4" width="400px" height="360px" title="图片4" />
					</a>
				</li>
				<li>
					<a href="http://www.51aspx.com" target="_blank">
						<img src="images/5.jpg" alt="图片5" width="400px" height="360px" title="图片5" />
					</a>
				</li>
				<li>
					<a href="http://www.caidao8.com" target="_blank">
						<img src="images/6.jpg" alt="图片6"  width="400px" height="360px" title="图片6" />
					</a>
				</li>
			</ul>

			<div class="bottom">
				<div class="text" id="text"></div>
		    <ul class="num" id="num">
		    </ul>
		  	<div style="clear:both;"></div>
	  	</div>
	  </div>
	</div>

</body>

</html>