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

@zhcn1wws订阅我们的饲料,以保持最新

新!跟随我们,你想要它


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, 响应, 滑块, 幻灯片, 宽度