注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jquery随机加载图片插件ChickenDinner

jQuery插件 fishcity 1089浏览

jquery随机加载图片插件ChickenDinner

ChickenDinner是一个愚蠢的jquery小插件,可以从客户端图像数组中随机加载图片。如何工作,非常简单,可以将插件直接应用到img中或是用CSS背景图片中。插件轻巧,大小只有2KB,下面来看下如何使用。

使用于img标签

首先,添加一个img标签到你的页面中,并给img加一个唯一的样式类,接着,把img的src属性留空(src="#"),或者是写上一个没有使用到其它js调用的img,别外,得把图片父元素加上宽度和高度。

/* src属性留空*/ 
<img class="js-chickendinner" src="#" alt="">

 /*没有JS调用*/ 
 <img class="js-chickendinner" src="images/banner1.png" alt="">

现在可以写入JS写初始化插件,记得写入path路径,默认是images/,当然也可以使用绝对地址,如http://www.jqcool.net/images/,看你喜欢。

 $('.js-chickendinner').chickenDinner({
      path: 'http://www.jqcool.net/images/',
      altTag: 'Banner Image',
      fadeInTime:2000,
      TheImages: ['ban1.png', 'ban2.png', 'ban3.png', 'ban4.png']
  });

使用于CSS背景图片

使CSS背景图片实现随机加载也很简单,同样有两个写法。首先,请添加一个DIV标签,并加一个唯一的CSS类便可,另一定法可以DIV上写入行内CSS样式加样背景图片。代码如下:

/* Blank src */  
<div class="js-chickendinner-bg"> <!--你的内容--> </div>

  /* With a fallback */  
  <div class="js-chickendinner-bg" style="background-image: url("../images/banner1.png"> <!--你的内容--> </div>

这次的初始化需要把cssBG选项设置为true,ChickenDinner 将临时添加行内图片背景样式属性,因此请确保目标元素的背景属性能正常使用。

$('.js-chickendinner-bg').chickenDinner({
        path: 'images/',
        fadeInTime:2000,
        cssBg:true,
        TheImages: ['banner2.png', 'banner3.png', 'banner4.png', 'banner5.png']
    });

参数选项

选项 描述 Value
path 图片路径 'images/'
TheImages 随机图片数组 ['banner2.png', 'banner3.png']
cssBG 是否CSS背景图片 True
altTag 图片的ALT值 'Banner Image'
fadeInTime 淡入时间  

转载请注明:jQ酷 » jquery随机加载图片插件ChickenDinner

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。