建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery带缩略图幻灯片插件PicSlide

来源:易助科技网浏览量:15收藏

简介


PicSlide是一款功能强大的、可制作带缩略图的幻灯片插件。

(下载的附件中带有DEMO)


JQuery带缩略图幻灯片插件PicSlide-示例图


参数


参数名默认值释义说明
idDIV的ID层
wayleft滑块的移动方向,其实这里只有一个left,插件中有top,但是不能用。
interval4000切换频率,这里为4秒



使用


1. 引入 jquery.js 、 jquery.picSlider.css 和 jquery.picSlider.js 文件


2. HTML


<div id="picSlider">
  <div id="picBox">
    <ul>
      <li>
        <a href="#" title="奇特的扇形叶片,唯独是银杏">
          <img src="leaf.jpg" alt=""/>
        </a>
      </li>
      
      <li>
        <a href="#" title="落下的银杏叶片,依旧具有如此遒劲的纹理">
          <img src="yleaf.jpg" alt=""/>
        </a>
      </li>
      
      <li>
        <a href="#" title="青色的果实,累累的挂满枝头">
          <img src="greenfruit.jpg" alt=""/>
        </a>
      </li>
      
      <li>
        <a href="#" title="金果喜人,丰收在望">
          <img src="yellowfruit.jpg" alt=""/>
        </a>
      </li>
    </ul>
  </div>
  
  <div id="picIndex"></div>
  <div id="picLink"></div>
</div>


3. 调用


var pics = [
  {'src':'01.jpg','href':'#','title':'秋天的银杏树','taget':'_blank'},
  {'src':'02.jpg','href':'#','title':'银杏行道树,秋天的金色','taget':'_blank'},
  {'src':'fall.jpg','href':'#','title':'美丽的金秋吸引着人们','taget':'_blank'}
];

$(document).ready(function(){
  $("#picSlider").slidePics({
    'width':334,
    'height':224,
    'slideData':pics,
    'usePics':'both',
    'effect':-1 
  });
});


属性配置:


$.fn.slidePics.defaults = {
  'width':'300px',
  //宽度
  
  'height':'225px',
  //高度
  
  'float':'none',
  //浮动特性
  
  'lnkTxtAbovePic':true,
  //链接文字显示在图片之上.注意:如果为false则在图片地下显示链接文字, 此时,整个slider的高度会自动加上22个px,即其高度为opt.height + 22
  
  'delay':5000,
  //播放间隔
  
  'duration':500,
  //渐显间隔
  
  'picDivID':'picBox',
  //图片所在DIV的ID
  
  'indexDivID':'picIndex',
  //图片索引所在DIV的ID
  
  'linkDivID':'picLink',
  //链接显示DIV的ID
  
  'slideData':[],
  //以json对象的方式指定幻灯片数据,格式如: [{'src':'images/xxx.jpg','href':'http://www.xxx.com','title':'访问下xxx.com','target':'_blank'},{...}]
  
  'usePics':'htmldef',
  //使用哪个图片数据?jsondata(由slideData指定的数据)或者htmldef(在html标记中指定的数据) 或者both(同时使用这两项数据)
  
  'effect':'none'
  //定义使用那种切换效果,为了提高性能,默认为无效果。可选:"none","auto","fadein","rtl","ltr","bt","tb","ltrb","lbrt", "rtlb","rblt","h","v","etc","cte", 还可以使用数字:-1为随机效果,等价auto, 其余取值于区间[0-13],使用bool值时,true为随机效果(random),false为无效果(none).
}; 



相关链接


GitHub 地址 :  https://github.com/mayanxiao/picslide