jQuery插件学习教程之SlidesJs轮播+Validation验证

2024-05-06 14:54:48

字体：大中小

来源：转载

供稿：网友

SlidesJs（轮播支持触屏）——官网（http://slidesjs.com）

1.简介

SlidesJs是基于Jquery(1.7.1+)的响应幻灯片插件。支持键盘，触摸，css3转换。

2.代码

<!doctype html><head><style>/* Prevents slides from flashing */#slides {display:none;}</style><script src="http://code.jquery.com/jquery-latest.min.js"></script><script src="jquery.slides.min.js"></script><script>$(function(){$("#slides").slidesjs({width: 940,height: 528});});</script></head><body><div id="slides"><img src="http://placehold.it/940x528"><img src="http://placehold.it/940x528"><img src="http://placehold.it/940x528"><img src="http://placehold.it/940x528"><img src="http://placehold.it/940x528"></div></body>

API简介

1.设置轮播的宽高（默认值都为 auto）

$("#slides").slidesjs({width: 700,height: 393});

2.设置从那张开始（默认值为 1）

$("#slides").slidesjs({start: 3 //这里注意数值从1开始，不是0；默认值0});

3.设置上下切换按钮

可以自定样式：

<a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a><a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a> $("#slides").slidesjs({navigation: {active: true,　　//显示或隐藏前一张后一张切换按钮；默认值为true,effect: "slide"　　//设置切换的方式，slide:平滑，fade:渐显；默认值slide}});

4.设置分页切换

可以自定样式：

<ul class="slidesjs-pagination">　　<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="active">1</a></li>　　<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1">2</a></li>　　<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2">3</a></li>　　<li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3">4</a></li></ul> $("#slides").slidesjs({pagination: {active: true,　　//显示或隐藏 分页；默认值trueeffect: "slide"　　//这里可以设置切换方式，跟上下页切换一样，但是跟上下页不冲突；默认值slide}});

5.自动播放

可以自定样式：

<a class="slidesjs-play slidesjs-navigation slidesjs-playing" href="#" title="Play" style="display: none;">Play</a><a class="slidesjs-stop slidesjs-navigation" href="#" title="Stop" style="">Stop</a> $("#slides").slidesjs({play: {active: true,　　　　//开始自动播放功能；默认值trueeffect: "slide",　　//切换方式，跟上面两个切换方式不冲突；默认值slideinterval: 5000,　　　//在每一个幻灯片上花费的时间；默认值5000auto: false,　　　　　//开始自动播放；默认值falseswap: true,　　　　　　//显示或隐藏 自动播放和停止按钮；默认值truepauseOnHover: false,　　//鼠标移入是否暂停；默认值falserestartDelay: 2500　　//重启延迟；默认值2500}});

上一篇：Javascript iframe交互并兼容各种浏览器的解决方法

下一篇：javascript加减乘除的简单实例