注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

浮游生物的博客

以扯蛋的态度面对操蛋的人生

 
 
 

日志

 
 

jcarousellite幻灯片滚动鼠标悬停效果  

2010-11-06 14:55:39|  分类: PHP |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

jcarousellite是一个开源的jQuery框架,官方网址:http://www.gmarwaha.com/jquery/jcarousellite/index.php 里面还有很多效果的Demo,感兴趣可以去看看。

 

以下是根据实际需求修改的一个版本,主要增加了鼠标悬停效果。(现实当中将按钮隐藏掉了)

 

 

HTML:

Html代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE>jQuery--jcarousellite--Demo</TITLE>  
  5.   <META NAME="Generator" CONTENT="EditPlus">  
  6.   <META NAME="Author" CONTENT="">  
  7.   <META NAME="Keywords" CONTENT="">  
  8.   <META NAME="Description" CONTENT="">  
  9.   
  10. <script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>  
  11. <script type="text/javascript" language="javascript" src="jcarousellite_1.0.1.js"></script>  
  12.   
  13.   
  14.  </HEAD>  
  15.  <BODY>  
  16.  官方网址:<a href="http://gmarwaha.com/jquery/jcarousellite/index.php" target="_blank">http://gmarwaha.com/jquery/jcarousellite/index.php</a>  
  17.  <br />  
  18. <br />  
  19.   
  20. <div class="default">  
  21. <button class="prev" ><<</button>  
  22. <button class="next">>></button>  
  23.  <div class="carousel">  
  24.      <ul>  
  25.          <li><img src="image/1.jpg" width="100" height="100" alt="1"></li>  
  26.          <li><img src="image/2.jpg" width="100" height="100" alt="2"></li>  
  27.          <li><img src="image/3.jpg" width="100" height="100" alt="3"></li>  
  28.          <li><img src="image/4.jpg" width="100" height="100" alt="4"></li>  
  29.          <li><img src="image/5.jpg" width="100" height="100" alt="5"></li>  
  30.          <li><img src="image/6.jpg" width="100" height="100" alt="6"></li>  
  31.          <li><img src="image/7.jpg" width="100" height="100" alt="7"></li>  
  32.          <li><img src="image/8.jpg" width="100" height="100" alt="8"></li>  
  33.          <li><img src="image/9.jpg" width="100" height="100" alt="9"></li>  
  34.      </ul>  
  35.  </div>  
  36. </div>  
  37. <script type="text/javascript" >  
  38.   
  39.   
  40. var MyMar = null;   
  41. var SleepTime = 3000;   //停留时长 单位毫秒   
  42.   
  43. $(function() {   
  44. $(".carousel").jCarouselLite({   
  45. btnNext: ".default .next",   
  46. btnPrev: ".default .prev",   
  47. visible: 6,     //显示图片数量   
  48. speed: 1000,    //滚动完成时长 单位毫秒   
  49. scroll: 1       //每次滚动图片数量   
  50. });   
  51.   
  52. $(".carousel").bind('mouseover',function(event){   
  53.         clearInterval(MyMar);   
  54.     })   
  55.     .bind('mouseout',function(event){   
  56.         MyMar=setInterval(next,SleepTime);   
  57.     });   
  58. });   
  59. function next(){   
  60.     $(".default .next").click();   
  61. }   
  62. MyMar = setInterval(next,SleepTime);   
  63. </script>  
  64.  </BODY>  
  65. </HTML>  

 

 

简单介绍一下jcarousellite_1.0.1.js的参数含义:

 

Js代码 复制代码
  1. $.fn.jCarouselLite = function(o) {      
  2.     o = $.extend({      
  3.         btnPrev: null,   //上一张按钮   
  4.         btnNext: null,   //下一张按钮   
  5.         btnGo: null,      //跳转到第几张   
  6.         mouseWheel: false,   //是否支持鼠标滚轮,需要jquery.mousewheel.js   
  7.         auto: null,   //是否自动滚动   
  8.      
  9.         speed: 200,   //滚动时长   
  10.         easing: null,   //滚动优化,需要jquery.easing.1.1.js   
  11.      
  12.         vertical: false,   //滚动方向,true垂直,false水平   
  13.         circular: true,   //是否重复播放,首位相接   
  14.         visible: 3,         //显示图片数量   
  15.         start: 0,           //从第几个开始滚动显示   
  16.         scroll: 1,          //每次滚动数量   
  17.      
  18.         beforeStart: null,   //滚动前调用函数   
  19.         afterEnd: null        //滚动后调用函数   
  20.     }, o || {});     

 

注:本例缺少的JS文件可自行下载

  评论这张
 
阅读(1226)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018