SlidesJS基本使用方法

來源 MZB大豆博客

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"