`
hsys
  • 浏览: 290864 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

Jquery+timers插件实现图片轮转

jQueryFlashCSSHTML 
阅读更多

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


有一个缺陷就是在图片轮转的时候，只有简单的淡显效果，什么百叶窗等效果如果有人会的告诉我一声，谢谢
分享到：
| selenium页面自动测试
评论
发表评论

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

相关推荐

    jquery.timers-1.2.js

    jquery.timers-1.2.js 定时器插件

    jquery.timers.js

    **jQuery Timers 插件详解** 在Web开发中，JavaScript的时间管理和定时任务处理是不可或缺的部分。jQuery库，作为广泛使用的JavaScript库，虽然提供了基础的定时功能，但有时我们需要更高级和灵活的定时器管理。这...

    jQuery Timers - jQuery定时器插件

    jQuery Timers - jQuery定时器插件

    jquery_timers实现带暂停功能的全屏相册实例源码

    《jQuery Timers 实现带暂停功能的全屏相册实例详解》 在Web开发中，全屏相册是一种常见的交互设计，它能够为用户提供沉浸式的浏览体验。在本实例中，我们将探讨如何利用jQuery Timers库来实现一个具有暂停功能的...

    jQueryTimers

    jQuery Timers 是一款专为 jQuery 设计的插件，它扩展了原生JavaScript中的setTimeout和setInterval函数，提供了更方便、更强大的定时器管理功能。这个插件的主要目的是简化在JavaScript和jQuery应用中处理定时任务...

    jquery网页静止自动执行jquery.timers

    `jQuery Timers`插件就是为此目的而设计的，它扩展了jQuery库，允许我们在页面在后台时也能持续执行定时任务。本篇文章将详细介绍`jQuery Timers`及其使用方法。 `jQuery Timers`插件的核心功能是提供了一种方式，...

    jquery_timers实现带暂停功能的全屏相册

    jquery_timers实现带暂停功能的全屏相册 /* http://www.haogongju.net/art/1036242 jQuery Timers 是一个用来封装 setTimeout 和 setInterval 方法的 jQuery 定时器插件。 提供了三个函式 1. everyTime(时间间隔, ...

    实现数据库实时更新 jQuery Timers

    jQuery Timers是一个插件，`jquery.timers-1.2.js`便是这个插件的文件，它扩展了jQuery的核心功能，允许开发者设置定时任务，比如定期执行某个函数。这在需要周期性检查或更新数据的场景中非常有用，比如实时显示...

    jQuery timers定时器

    jQuery timers定时器简单易懂。。 直接调用，时间设置可以自己修改

    jquery 插件集合

    jquery.colorbox：完美的jquery弹出层支持图片播放 jquery.contextmenu.r2：jquery右键菜单 jquery.cookie：jquery Cookie操作 jquery.form：jquery表单提交（ajax方式或其它方式自定） jquery.idTabs：jquery选项卡...

    jquery图片轮显

    利用jQuery实现图片轮显功能不仅简单快捷，还能确保良好的用户体验。本文将根据提供的代码示例，深入解析如何使用jQuery来制作图片轮显功能，并探讨其工作原理和技术细节。 #### 二、核心概念与组件 ##### 1. ...

    完美兼容各大浏览器的jQuery插件实现图片切换特效

    实现了图片轮播功能，jquery插件名称为zoeDylan.ImgChange，图片路径、跳转链接、提示标题都是有动态数组来配置，jquery插件可灵活配置6个参数， height高、width宽、mgs图片地址、links点击地址、tips图片说明、...

    移动端左右+自动滚动jQuery插件.zip

    JavaScript是实现插件核心功能的关键，它处理用户的交互，如检测滑动手势，计算滚动方向，以及控制内容的自动滚动。插件可能会使用定时器（Timers）来实现自动滚动功能，根据设定的时间间隔自动切换到下一个内容块。...

    jquery.timer.js

    由于基于jQuery，你可以轻松地与其他jQuery插件集成，实现更复杂的交互功能。 ### 6. 应用场景 Timer.js广泛应用于各种场景，如倒计时、自动轮播、实时数据更新等。例如，在一个倒计时应用中，你可以这样做： ```...

    jquery实现的两边遮罩图片滚动宽屏幻灯片特效源码.zip

    在幻灯片的实现中，jQuery的定时器（Timers）功能也扮演着关键角色。`setInterval()`和`setTimeout()`函数可以设置定时执行某些操作，如定时切换图片，从而达到自动播放的效果。同时，为了实现手动控制，jQuery还...

    jquery做的图片切换特效

    8. **插件（Plugins）**：jQuery社区开发了许多插件，专门用于创建各种图片轮播和切换效果，如Slick、bxSlider、Nivo Slider等。它们封装了复杂的逻辑，让开发者更容易实现专业级别的图片切换功能。 9. **响应式...

    基于jquery的banner广告图片动画切换插件示例.zip

    在jQuery中，我们可以使用定时器（Timers）配合数组来实现自动切换功能。例如，定义一个数组存储所有图片的源（src），然后使用`setInterval()`设置定时器，每隔一段时间就更新当前显示的图片。 此外，该示例可能还...

Magicbox
Global site tag (gtag.js) - Google Analytics