小可个人BLOG

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

网页图片轮播特效 插件篇

2011/12/26 19335点热度 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

小可

百分之三十五大叔,爱好女,爱好黑丝女!

点赞
< 上一篇
下一篇 >

文章评论

  • JJ.lin

    学习一下!这个挺管用!

    2011/12/28
    回复
    • 小可

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

      2011/12/29
      回复
  • 君说

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

    2012/07/27
    回复
    • 小可

      @君说 这都被你发现了?

      2012/07/27
      回复
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    取消回复

    最新 热点 随机
    最新 热点 随机
    近期淘宝抽风全是秒退订单 入手一个鱼缸,准备养点草、鱼、虾、蟹 腾飞WebOs个人云桌面,新一代的私人云盘 已经不再年轻 如何在国内直接用USDT消费(Depay虚拟visa卡评测) 人生短短数十载,青春有几许 普通人怎么理财基金、买股票投资 雅黑探针修改版 支持PHP8.X PHP7.X Wordpress 垃圾评论插件 Mimi Captcha 2020
    点一盏心灯 让生命泊于安宁 衙门深深深几许 今生若有缘把酒问青天 冷也是种享受 人生充满了无奈 万圣节:小可大战一大波僵尸 兜兜转转又一年 十里红妆,青丝绾正 内部瓦解的可怕 独立博客是否真的没落了
    最近评论
    贵州旅游包车 发布于 3 个月前(04月24日) 客户下了单,他马上就推一个便宜的同等商品,你说人家退单不。
    小可 发布于 7 个月前(12月17日) 养鱼的后续不见了,有点更不动了
    雨帆 发布于 1 年前(06月04日) 所以,我是说所以,古法养鱼的后续呢?催更。
    达到 发布于 2 年前(11月26日) 大佬请分享
    小可 发布于 2 年前(05月29日) 具体使用教程,请搜索“腾飞webos”那边有完整的教程,当然,有不懂的也可以在这里问我,我看到很乐意...

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

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

    Theme Kratos Made By Seaton Jiang

    浙ICP备17004615号-1