小可BLOG

  • 首页
  • 文章分类
    • 随言随笔
    • 记录生活
    • 东拼西凑
    • 博客相关
    • APP相关
  • 给我留言
    • 博客相册
    • 个人简介
    • 彩色标签
  • 网上邻居
  • 隐私政策
>°))))彡
想做一条咸鱼,每天都很闲。
  1. 首页
  2. 博客相关
  3. 正文

网页图片轮播特效 插件篇

2011/12/26 17785点热度 0人点赞 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>  

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: css flash jquery wordpress 图片轮播
最后更新:2012/01/14

小可

国内互联网站长,爱研究,爱折腾,爱wordpress,爱博客,爱小可,各种爱。 开设博客纯属个人爱好,关注wordpress,关注互联网,关注文学,关注情感,关注生活,各种关注。 喜欢音乐,喜欢电影,喜欢摄影,喜欢聊天,喜欢扯蛋,各种喜欢。

点赞
< 上一篇
下一篇 >

文章评论

  • JJ.lin

    学习一下!这个挺管用!

    2011/12/28
    回复
    • 小可

      @JJ.lin 嗯,拿去用吧,写了好久才贴上来的,贴的时候麻烦的要死!

      2011/12/29
      回复
  • 君说

    话说你上面的那个彩虹的flash是用阿里妈妈做的?

    2012/07/27
    回复
    • 小可

      @君说 这都被你发现了?

      2012/07/27
      回复
  • 取消回复

    最新 热点 随机
    最新 热点 随机
    如何在国内直接用USDT消费(Depay虚拟visa卡评测) 人生短短数十载,青春有几许 普通人怎么理财基金、买股票投资 雅黑探针修改版 支持PHP8.X PHP7.X Wordpress 垃圾评论插件 Mimi Captcha 2020 淘宝联盟选品顾问邀请码 淘宝、抖音、外卖优惠券领取APP 拜拜2019 我还在,一切安好
    新的一年我们相依 我们存在两个陌生的世界 无可奈何花落去 一转眼一年又要过去了 下雪了,风花雪月 中国的奥运情缘 小可喜欢一个人了 死人的日子过得比活人滋润(转) 别就知道淘宝!!! 七色崖,悲伤从未停止
    最近评论
    追梦 发布于 2 周前(01月23日) 现在还写博客的真的不多了
    aaa 发布于 1 个月前(12月23日) qwewwww
    晨汐网 发布于 2 个月前(12月19日) 博主你好,你的网站做得真好,可以跟你换个友链吗?
    点儿 发布于 2 个月前(12月18日) 缺乏安全感
    付费进群 发布于 2 个月前(12月16日) 数字支付 未来大趋势

    本博由BT面板驱动 © 2023 小可BLOG成立4089天了 | 网站地图 | 口袋券 | 口袋券app | 温小券 | 温小券app
    我们相爱
    了

    COPYRIGHT © 2022 小可博客. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang

    浙ICP备17004615号-1