WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

Full Width Slider 2

— 添加到WorldWideScripts.net

訂閱我們的飼料,以保持最新

新!跟隨我們,你想要它


Full Width Slider 2 - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

全寬滑塊2易於使用jQuery的圖像滑塊全屏幕寬度進行了優化。

特徵

- jQuery的驅動。
- 響應式設計。
- 可調節的轉換速度。
- 自動幻燈片暫停懸停。
- 兼容所有主流瀏覽器(IE8及以上,鉻,火狐,Safari和Opera)
- 可以添加標題,描述和鏈接按鈕到每張幻燈片。

新方法:

addSlide - Adds slide to the slider 
start - Starts the slider
restart - Restart the slider
destroy - Remove the slider

新選項:

 cs - Current slide; 0 - first, 1 - second etc... 
expandDuration - Initial height animation duration, milliseconds
linktext - Button Text
titleHTML - Custom HTML for the Title (ex. <h4>%title%</h4> )
descriptionHTML - Custom HTML for the Description (ex. <p>%desc%</p> )
linkHTML – Custom HTML for the link button (ex. <a href="%link%">%linktext%</a> )
beforeInit – Function to run before slider init
afterInit – Function to run after slider init
slideStart – Function to run on slide start, returns the slide object
slideEnd – Function to run on slide end, returns the slide object

例如所有的設置:

 <腳本類型=“文/ JavaScript的”> $(文件)。就緒(函數(){ //創建新的Slider實例 VAR my_slider = $('。比如')fws2()。 //設置滑塊設置(可選),您可以完全忽略這個塊 my_slider.settings({ CS:0,//當前的幻燈片; 0 - 首先,1 - 第二等.. 持續時間:750,//幻燈片持續時間; 毫秒 hoverpause:1,//暫停懸停; 1 - 是的,0 - 沒有 暫停:6000,//暫停之前去下一張幻燈片; 毫秒 箭:1,//顯示箭頭; 1 - 是的,0 - 沒有 子彈:0,//顯示子彈; 1 - 是的,0 - 沒有 expandDuration:750,//顯示箭頭; 1 - 是的,0 - 沒有 linktext的:'更多',//按鈕文本(全局設置) // 高級選項 titleHTML:“<H4>%標題%</ H4>',//自定義HTML的標題 descriptionHTML:'<P>%遞減%</ p>',//自定義HTML的說明 linkHTML:“<a href="%link%">%linktext的%</A>',//自定義的HTML鏈接按鈕 beforeInit:函數(){} //函數來滑塊初始化之前運行 afterInit:函數(){} //滑塊功能初始化後運行 slideStart:功能(幻燈片){} //函數,在幻燈片開始運行,返回的幻燈片對象 slideEnd:功能(幻燈片){} //函數,在幻燈片結束時運行,返回的幻燈片對象 }); //添加幻燈片 my_slider.addSlide({ 圖像:“IMG / slide_1.jpg',//圖片來源 標題:“幻燈片1',//標題 說明:“說明”,//幻燈片說明 linktext的:'',//按鈕文本(可選,否則將使用全局設置) 鏈接:“HTTP://網站'//閱讀更多URL鏈接 }); //開始滑塊 my_slider.start(); }); </ SCRIPT> 

簡短的例子不變量,利用鏈接:

 <腳本類型=“文/ JavaScript的”> $(文件)。就緒(函數(){ $('。例1“) .fws2({子彈:1,箭頭:0}) .addSlide({圖片:“IMG / slide_1.jpg”,標題:“幻燈片1”,說明:“說明”,鏈接:“HTTP://網站'}) .addSlide({圖片:“IMG / slide_2.jpg”,標題:“幻燈片2',說明:”說明“,鏈接:”HTTP://網站'}) .addSlide({圖片:“IMG / slide_3.jpg”,標題:“幻燈片3',說明:”說明“,鏈接:”HTTP://網站'}) 。開始(); }); </ SCRIPT> 

使用回調函數實例

 <腳本類型=“文/ JavaScript的”> $(文件)。就緒(函數(){ VAR example_slider = $('。例2“)fws2()。 example_slider.settings({ afterInit:函數(){ 警報(“滑塊準備好了!'); }, slideEnd:功能(幻燈片){ VAR標題= slide.find(“稱號。”)文本()。 警報(“這是'+稱號); } }); example_slider.addSlide({圖片:“IMG / slide_1.jpg”,標題:“幻燈片1”,說明:“說明”,鏈接:“HTTP://網站'}); example_slider.addSlide({圖片:“IMG / slide_2.jpg”,標題:“幻燈片2',說明:”說明“,鏈接:”HTTP://網站'}); example_slider.addSlide({圖片:“IMG / slide_3.jpg”,標題:“幻燈片3',說明:”說明“,鏈接:”HTTP://網站'}); example_slider.start(); }); </ SCRIPT> 

例如自定義HTML

 <腳本類型=“文/ JavaScript的”> $(文件)。就緒(函數(){ VAR example_slider = $('。例4“)fws2()。 example_slider.settings({ titleHTML:'<H1> <a href="%link%">%標題%</A> </ H1>“, descriptionHTML:'<P> <I類=“發發檢查”/> <SPAN>%遞減%</ SPAN> </ P>“, linktext的:“了解更多”, linkHTML:“<a href="%link%">%linktext的%大約%標題%</A>” }); example_slider .addSlide({圖片:“IMG / slide_1.jpg”,標題:“幻燈片1”,說明:“說明”,鏈接:“HTTP://網站'}) .addSlide({圖片:“IMG / slide_2.jpg”,標題:“幻燈片2',說明:”說明“,鏈接:”HTTP://網站'}) .addSlide({圖片:“IMG / slide_3.jpg”,標題:“幻燈片3',說明:”說明“,鏈接:”HTTP://網站'}) 。開始(); }); </ SCRIPT> 

保持最新!

跟隨我們的FacebookTwitter上 ,並獲得最新的新聞有關項目的更新和即將推出的插件和腳本!

您也可以按照我們的Instagram,並很快 YouTube上如何安裝插件我們和腳本視頻教程!

更新日誌

2015年12月8號

- Javascript代碼被重寫。
- imagesloaded.js腳本現在是可選的。
- HTML已被刪除。 現在已完全從JavaScript的構建。
- 谷歌字體鏈接是從頭部刪除,因為它不再使用。
- 滑塊現在使用$(選擇)初始化.fws2();

- 新的方法:

 addSlide - Adds slide to the slider 
start - Starts the slider
restart - Restart the slider
destroy - Remove the slider

- 新的選項:

 cs - Current slide; 0 - first, 1 - second etc... 
expandDuration - Initial height animation duration, milliseconds
linktext - Button Text
titleHTML - Custom HTML for the Title (ex. <h4>%title%</h4> )
descriptionHTML - Custom HTML for the Description (ex. <p>%desc%</p> )
linkHTML – Custom HTML for the link button (ex. <a href="%link%">%linktext%</a> )
beforeInit – Function to run before slider init
afterInit – Function to run after slider init
slideStart – Function to run on slide start, returns the slide object
slideEnd – Function to run on slide end, returns the slide object

二零一四年四月十日

- 滑塊現在支持在頁面上的多個實例。
- 增加了子彈導航。
- 箭/子彈導航現在可以打開/關閉。
- 增加的選擇禁用鼠標懸停autoslide停止。
- 滑塊現在使用字體真棒,而不是圖像的導航箭頭和子彈。
- 增加了鍵盤的左/右箭頭導航。


下載
此類別中的其他組成部分這個作者的所有組件
評論常見問題和答案

屬性

創建:
12年11月16日

最後更新:
15年12月8日

高分辨率:

兼容的瀏覽器:
IE8,IE9,IE10,IE11,火狐,Safari,歌劇,鉻

包括的文件:
JS的JavaScript,HTML,CSS

軟件版本:
jQuery的

關鍵字

電子商務, 電子商務, 所有項目, 充分, JavaScript的, jQuery的, JS, 響應, 滑塊, 幻燈片, 寬度