SlidesJS基本使用方法和官方文檔解釋 【Jquery幻燈片插件 Jquery相冊插件】

Slides – 是一個簡單的，容易定製和風格化，的jQuery幻燈片插件。

Slides提供褪色或幻燈片過渡效果，圖像淡入淡出，圖像預壓，自動生成分頁，循環，自動播放的自定義等不少選項。

用Slides插件，你能夠隨機播放幻燈片，設定那一套您想要開始幻燈片。它附帶充分的說明和示例。

DEMO地址：http://slidesjs.com/

官網地址：http://slidesjs.com/

下載地址：http://slidesjs.com/downloads/slides.zip

基本的HTML結構

<div id="slides">
  <div class="slides_container">
    <div>
      <h1>Slide 1</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 2</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 3</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div>
      <h1>Slide 4</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

基本CSS代碼

<style type="text/css" media="screen">
  .slides_container {
    width:470px;
    height:170px;
  }
  .slides_container div {
    width:470px;
    height:170px;
    display:block;
  }
</style>

基本的初始化JavaScript代碼

<script>
  $(function(){
    $("#slides").slides();
  });
</script>

官方文檔解釋 （版本1.1.9）

preload(boolean)

當參數設置爲  true 的時候，表示在加載相冊中照片的過程當中 顯示 加載圖片，設置爲 false的時候則表示 不顯示  加載圖片

$(function(){
  $("#slides").slides({
    preload: true
  });
});

默認值爲：  false

preloadImage(string)

這個屬性通常跟上一個  preload(boolean) 一塊兒使用，string內的值表示須要顯示的 加載圖片 的  路徑地址

$(function(){
  $("#slides").slides({
	preload: true,
	preloadImage: '/img/loading.gif'
  });
});

默認值爲： "/img/loading.gif"

container(string)

設置放置圖片層的頂級div   樣式名稱

$(function(){
  $("#slides").slides({
	container: 'slides_container'
  });
});

默認值爲： "slides_container"

generateNextPrev(boolean)

設置 是否自動生成 上一個  下一個 按鈕

$(function(){
  $("#slides").slides({
	generateNextPrev: true
  });
});

默認值爲： false

next(string)

自動生成的 下一個按鈕 樣式名稱

$(function(){
  $("#slides").slides({
	next: 'next'
  });
});

默認值爲： "next"

prev(string)

自動生成的 上一個按鈕 樣式名稱

$(function(){
  $("#slides").slides({
	prev: 'prev'
  });
});

默認值爲： "prev"

pagination(boolean)

若是你不使用分頁的方式顯示圖片你能夠設置爲 false ，可是沒有必要，推薦不作設置

$(function(){
  $("#slides").slides({
	pagination: true
  });
});

generatePagination(boolean)

設置 是否自動生成 分頁導航層

$(function(){
  $("#slides").slides({
	generatePagination: true
  });
});

默認值爲： true

paginationClass(string)

設置 分頁導航層的 樣式名稱

$(function(){
  $("#slides").slides({
	paginationClass: 'pagination'
  });
});

默認值爲： "pagination"

currentClass(string)

設置分頁導航層中 當前分頁項目的 樣式名稱

$(function(){
  $("#slides").slides({
	currentClass: 'current'
  });
});

默認值爲： "current"

待續...