网页图片轮播特效 插件篇

博客相关 12907 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 回复