- 浏览: 290539 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
kane0409:
NB,解决了,我是把里面两个文件夹中的文件单独复制到eclip ...
解决initializing java tooling(1%) -
string2020:
那如果不采用Tomcat容器认证,怎么办?
Tomcat Session共享 -
hety163:
删除当前工作目录下的WORKSPACE/.metadata/. ...
解决initializing java tooling(1%) -
fox13754888170:
害的我好惨啊 每天工具不动弹 领导还以为我偷懒呢。。。。 ...
解决initializing java tooling(1%) -
ywc123zk:
十分感谢,myeclipse8.0也出现这种情况,用你的方法解 ...
解决initializing java tooling(1%)
很多网站上多有轮转图片,有的是用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
发表评论
-
IE8下getElementsByName的问题
2011-07-11 12:43 1206在IE8下getElementsByName(name)获取 ... -
JS解决PNG图片在IE6下不透明的问题
2010-12-20 13:20 3952可恶的IE6,各种阻碍,各种难,中国还是IE6消亡最大的障碍, ... -
jquery操作select
2010-08-05 14:24 1414获取选中项的值 $jq("#mselect op ... -
JS时间格式化(短日期)
2010-08-05 14:21 2483JS时间格式化(短日期),如new Date() 转成2010 ... -
Javascript垂直方向轮播
2010-06-04 17:56 3192<style type="text/c ... -
javascript判断浏览器核心
2010-05-31 13:07 1306/** * 判断浏览器核心 * @return I ... -
jquery.autocomplete的使用
2010-05-17 15:04 1340$jq(document).ready(functio ... -
Jquery 实现复制到剪贴板
2010-03-04 09:21 11581不兼容Firefox <html> < ... -
Jquery文档处理的几种效果
2010-02-21 16:40 991Jquery文档处理的几种效果 <html> ... -
Jquery的几种动态效果(animate)
2010-02-02 16:43 2580<html> <head> & ... -
Jquery show hide toggle
2010-02-01 18:41 2883<html> <head> & ... -
兼容FireFox和IE8的设为首页和添加收藏
2010-02-01 18:40 1321设置首页和添加收藏是很常用的JS脚本,但是我以前经常用的那些脚 ... -
Jquery表单验证
2010-02-01 12:52 1846首先加一段HTML代码: <!DOCTYPE HTM ... -
JQuery实现淡入淡出效果
2010-01-29 17:51 2613以前一直用JavaScript,现在发现了Jquery的UI简 ... -
动态设置Ckeditor的尺寸
2010-01-27 11:55 1589<input type='textarea' i ... -
js实现拖动层,兼容IE/FireFox
2010-01-22 11:19 1593先添加一个div层 <div id='pop-ed ... -
JQuery找控件
2010-01-22 09:21 1399先将Jquery的包含进来 $("#&q ... -
收藏的JavaScript树(11种)
2010-01-20 13:39 836http://www.jb51.net/web/21947.h ... -
调用CkEditor
2010-01-19 14:20 1192首先包含以下js <script language= ... -
CKeditor配置大全
2010-01-19 12:12 17410第一步:基本配置 CKEditor + CKFinder ...
相关推荐
jquery.timers-1.2.js 定时器插件
**jQuery Timers 插件详解** 在Web开发中,JavaScript的时间管理和定时任务处理是不可或缺的部分。jQuery库,作为广泛使用的JavaScript库,虽然提供了基础的定时功能,但有时我们需要更高级和灵活的定时器管理。这...
jQuery Timers - jQuery定时器插件
《jQuery Timers 实现带暂停功能的全屏相册实例详解》 在Web开发中,全屏相册是一种常见的交互设计,它能够为用户提供沉浸式的浏览体验。在本实例中,我们将探讨如何利用jQuery Timers库来实现一个具有暂停功能的...
jQuery Timers 是一款专为 jQuery 设计的插件,它扩展了原生JavaScript中的setTimeout和setInterval函数,提供了更方便、更强大的定时器管理功能。这个插件的主要目的是简化在JavaScript和jQuery应用中处理定时任务...
`jQuery Timers`插件就是为此目的而设计的,它扩展了jQuery库,允许我们在页面在后台时也能持续执行定时任务。本篇文章将详细介绍`jQuery Timers`及其使用方法。 `jQuery Timers`插件的核心功能是提供了一种方式,...
jquery_timers实现带暂停功能的全屏相册 /* http://www.haogongju.net/art/1036242 jQuery Timers 是一个用来封装 setTimeout 和 setInterval 方法的 jQuery 定时器插件。 提供了三个函式 1. everyTime(时间间隔, ...
jQuery Timers是一个插件,`jquery.timers-1.2.js`便是这个插件的文件,它扩展了jQuery的核心功能,允许开发者设置定时任务,比如定期执行某个函数。这在需要周期性检查或更新数据的场景中非常有用,比如实时显示...
jQuery timers定时器简单易懂。。 直接调用,时间设置可以自己修改
jquery.colorbox:完美的jquery弹出层支持图片播放 jquery.contextmenu.r2:jquery右键菜单 jquery.cookie:jquery Cookie操作 jquery.form:jquery表单提交(ajax方式或其它方式自定) jquery.idTabs:jquery选项卡...
利用jQuery实现图片轮显功能不仅简单快捷,还能确保良好的用户体验。本文将根据提供的代码示例,深入解析如何使用jQuery来制作图片轮显功能,并探讨其工作原理和技术细节。 #### 二、核心概念与组件 ##### 1. ...
实现了图片轮播功能,jquery插件名称为zoeDylan.ImgChange,图片路径、跳转链接、提示标题都是有动态数组来配置,jquery插件可灵活配置6个参数, height高、width宽、mgs图片地址、links点击地址、tips图片说明、...
JavaScript是实现插件核心功能的关键,它处理用户的交互,如检测滑动手势,计算滚动方向,以及控制内容的自动滚动。插件可能会使用定时器(Timers)来实现自动滚动功能,根据设定的时间间隔自动切换到下一个内容块。...
由于基于jQuery,你可以轻松地与其他jQuery插件集成,实现更复杂的交互功能。 ### 6. 应用场景 Timer.js广泛应用于各种场景,如倒计时、自动轮播、实时数据更新等。例如,在一个倒计时应用中,你可以这样做: ```...
在幻灯片的实现中,jQuery的定时器(Timers)功能也扮演着关键角色。`setInterval()`和`setTimeout()`函数可以设置定时执行某些操作,如定时切换图片,从而达到自动播放的效果。同时,为了实现手动控制,jQuery还...
8. **插件(Plugins)**:jQuery社区开发了许多插件,专门用于创建各种图片轮播和切换效果,如Slick、bxSlider、Nivo Slider等。它们封装了复杂的逻辑,让开发者更容易实现专业级别的图片切换功能。 9. **响应式...
在jQuery中,我们可以使用定时器(Timers)配合数组来实现自动切换功能。例如,定义一个数组存储所有图片的源(src),然后使用`setInterval()`设置定时器,每隔一段时间就更新当前显示的图片。 此外,该示例可能还...