JQuery带缩略图幻灯片插件PicSlide

简介

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

（下载的附件中带有DEMO）

参数：

使用

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