Jquery 订阅所有【Jquery】的日志

Jquery幻灯片轮换—focusbox

作者:rainweb 日期:2010-05-18

字体大小: 小 中 大

 

幻灯片轮换展现着页面重要信息，一个独特并富有创意幻灯效果总是常常吸引着我。它包含着设计师的想象力和前端制作者的巧妙处理手法。虽然幻灯片的效果已很是很多了，但是这个有它特殊的地方吸引着我，跟大家分享一下。 

特点
  1. 输出循环图片列表即可；    
  2. 鼠标移进幻灯片时停止自动切换；    
  3. 左右按钮进行切换调整；    
  4. 右下角小点按钮可切换，切换后有直观进度反映；    
  5. 自动切换有右上角有进度Loading反映(偶最喜欢);    

 

使用说明：

XML/HTML代码
  1. <div id="rotator" class="rotator">  
  2.     <a class="btn prev" href="#prev">previous</a>  
  3.     <a class="btn next" href="#next">next</a>  
  4.     <div class="rotator_cont">  
  5.         <div class="loader"><div id="loader_pic" class="loader_pic"></div></div>  
  6.         <ul>  
  7.             <li><a href="http://rainweb.cn/1/"><img src="images/pic/pic_1.jpg" alt="" /></a></li>  
  8.             <li><a href="http://rainweb.cn/2/"><img src="images/pic/pic_2.jpg" alt="" /></a></li>  
  9.             <li><a href="http://rainweb.cn/3/"><img src="images/pic/pic_3.jpg" alt="" /></a></li>  
  10.             <li><a href="http://rainweb.cn/4/"><img src="images/pic/pic_4.jpg" alt="" /></a></li>  
  11.             <li><a href="http://rainweb.cn/5/"><img src="images/pic/pic_5.jpg" alt="" /></a></li>  
  12.         </ul>  
  13.     </div>  
  14.     <div class="overlay"></div>  
  15. </div>  
JavaScript代码
  1. $(function(){   
  2.     focusBox('rotator');   
  3. })  

 

查看演示    下载地址




[本日志由 rainweb 于 2010-05-18 02:01 PM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 2 | 引用: 0 | 查看次数: -
回复回复tidus[2010-05-26 09:26 AM | del]
就当前而言，不支持IE6.0，这才是悲剧。
回复回复伊牛娃[2010-05-18 08:46 PM | del]
这个很好，要顶一下
发表评论
昵　称:
密　码: 游客发言不需要密码.
内　容:
验证码: 验证码
选　项:
虽然发表评论不用注册，但是为了保护您的发言权，建议您注册帐号.