网页图片轮播特效 插件篇

博客相关 10046 Views 4 个留言

要实现网页推案轮播一定要使用flash吗?其实不然,wordpress中直接用jquery就可以解决,打到我们想象的特效。很简单,配合上一个插件【jQuery Cycle Plugin】这个问题就很简单了,而且也很顺畅,不必为了flash在某些地方播放不起来的尴尬。

很多网站逐渐透过jQuery来取代Flash的一些特效,再加上现在HTML5是趋势,很多东西都是透过JS并搭配HTML5来时做的,大家或许会担心浏览器对Javascript处理的效能,别担心,现在各家浏览器的开发重点大多着重在Javascript的处理效能上,所以在网站跑JS不会再跟以前一样非常的吃电脑资源了,而且速度也快很多呢!

插件名字:jQuery Cycle Plugin
插件介绍:http://jquery.malsup.com/cycle/
下载地址:http://jquery.malsup.com/cycle/download.html

第1步  首先,网页要加载2个js,也就是jquery。载入的顺序尽量不要调动,否则很可能发生错误。代码请加入到</head>标签之前。见底部第一段代码

第2步  接着在网页的body内加上以下代码,其中的<div class=”show”></div>是采用css背景图片的方式呼叫出图片,如果你习惯用img语法,那你也可以全部改成img语法输出图片,这样可以简化CSS的部分,但相对的html页面就会比较多代码(在此只先使用4张图片轮播)。见底部第二段代码

第3步  接着就要准备4张图片(图片大小为600*450),再来我们要写CSS了。接着请按照下方代码写入入第一段的#sider的CSS,对应到HTML的<div id=”slider”>语法中设定了区块的高和宽;接着下方的.show1这边对应的就是<div class=”show1″>因为我们上面设定show1~show4,所以需要设定四个,在此只展示.show1和.show2。CSS代码见底部第三段代码

第4步 接着,我们需要设定图片轮播的速度与特效,如果特效使用fade,那就在</head>标签之前加上以下代码:见底部第四段代码

第5步  回到网页,我们就会看到特效。



  1. //第一段代码开始   

  2.     

  3. <script type=“text/javascript” src=“http://ajax.googleapis.com/ajax/libs/<span class=”wp_keywordlink_affiliate“><a href=”http://xiaoke.name/tag/jquery” title=”查看 jquery 中的全部文章” target=”_blank“>jquery</a></span>/1.6/jquery.min.js”></script>   

  4. <script type=“text/javascript” src=“./js/jquery.cycle.lite.js”></script>   

  5.     

  6. //第二段代码开始   

  7.     

  8. <div id=“slider”>   

  9. <div class=“show1”></div>   

  10. <div class=“show2”></div>   

  11. <div class=“show3”></div>   

  12. <div class=“show4”></div>   

  13. </div>   

  14.     

  15. //第三段代码开始   

  16.     

  17. #slider{   

  18. clear:both;   

  19. height:450px;   

  20. width:600px;   

  21. padding:0;   

  22. margin:0 auto;   

  23. z-index:0;   

  24. clear:both;   

  25. display:block;   

  26. }   

  27. .show1{   

  28. backgrounnd:url(“img/1.jpg”) no-repeat scrool 0 0 transparent; padding:0;   

  29. height:450px;   

  30. width:600px;   

  31. top:0;   

  32. left:0;   

  33. }   

  34. .show1{   

  35. backgrounnd:url(“img/2.jpg”) no-repeat scrool 0 0 transparent;   

  36. padding:0;   

  37. height:450px;   

  38. width:600px;   

  39. top:0;   

  40. left:0;   

  41. }   

  42.     

  43. //第四段代码开始   

  44.     

  45. <script type=“text/javascript”>   

  46. jQuery(document).ready(function($) {   

  47. $(‘#slider’).cycle({   

  48. fx: ‘fade’, //特效 speed: 7500,   

  49. timeout: 7200,   

  50. random: 1   

  51. });   

  52. }); </script>  

转载请注明:小可博客 » 网页图片轮播特效 插件篇

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (4)

  1. 学习一下!这个挺管用!

    JJ.lin2011-12-28 23:02 回复
    • 嗯,拿去用吧,写了好久才贴上来的,贴的时候麻烦的要死!

      小可2011-12-29 14:28 回复
  2. 话说你上面的那个彩虹的flash是用阿里妈妈做的?

    君说2012-07-27 10:19 回复