Jquery+timers插件实现图片轮转

hsys

浏览: 286778 次
性别:
来自: 杭州

最近访客更多访客>>

cserbaby

janiter

buralin

xuzhou530

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

jQuery Flash CSS HTML

很多网站上多有轮转图片，有的是用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>

有一个缺陷就是在图片轮转的时候，只有简单的淡显效果，什么百叶窗等效果如果有人会的告诉我一声，谢谢

轮转图片.rar (531.6 KB)
下载次数: 87

分享到：

Flex简单的绘图 | selenium页面自动测试

2010-03-22 15:59
浏览 1573
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery+timers插件实现图片轮转

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Jquery+timers插件实现图片轮转

评论

发表评论

相关推荐

IE8下getElementsByName的问题

JS解决PNG图片在IE6下不透明的问题

jquery操作select

JS时间格式化（短日期）

Javascript垂直方向轮播

javascript判断浏览器核心

jquery.autocomplete的使用

Jquery 实现复制到剪贴板

Jquery文档处理的几种效果

Jquery的几种动态效果(animate)

Jquery show hide toggle

兼容FireFox和IE8的设为首页和添加收藏

Jquery表单验证

JQuery实现淡入淡出效果

动态设置Ckeditor的尺寸

js实现拖动层，兼容IE/FireFox

JQuery找控件

收藏的JavaScript树（11种）

调用CkEditor

CKeditor配置大全

最近访客更多访客>>