转自:http://www.cnblogs.com/chenrf/p/5654093.html#undefined
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></