插件描述：Simple jQuery CSS3滑块支持所有浏览器，并且简单实用
使用方法
添加jQuery,simpleSlider.js,touchSwipe.js(可选,如果你想要支持触摸)和transit.js在页面head中。滑块会自动改变useTransitionEnd属性为true。您可以通过设置禁用这个updateTransit:错误的选项。
1 2 3 | <script type="text/javascript" src="transit.js"></script><script type="text/javascript" src="touchSwipe.js"></script><script type="text/javascript" src="simpleSlider.js"></script> |
添加一个div到你的网站包含幻灯片。这些div的标准名称。滑块和。滑,但是这些选项可以改变的对象<div class='slider'>
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class='slide'> <div class='slidecontent'> <h1>Solar Dolar Wolar Woot</h1> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere cursus euismod.Aenean ut tortor leoing elit. Etiam posuere cursus euismod.Aenean ut tortor leo.</h2> </div> </div> <div class='slide' > <div class='slidecontent'> <h1>Solar Dolar Wolar Woot</h1> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam posuere cursus euismod.Aenean ut tortor leo.</h2> </div> </div></div> |
创建滑块
1 2 3 | $(document).ready(function(){ $(".slider").simpleSlider();}); |
自定义选项
您还可以控制simpleSlider的选项。只是对象的选项解析成simpleSlider()。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(document).ready(function(){ // Default options var options = { slides: '.slide', // The name of a slide in the slidesContainer swipe: true, // Add possibility to Swipe > note that you have to include touchSwipe for this slideTracker: true, // Add a UL with list items to track the current slide slideTrackerID: 'slideposition', // The name of the UL that tracks the slides slideOnInterval: true, // Slide on interval interval: 5000, // Interval to slide on if slideOnInterval is enabled animateDuration: 1500, // Duration of an animation animationEasing: 'easeInOut', // Accepts: linear ease in out in-out snap easeOutCubic easeInOutCubic easeInCirc easeOutCirc easeInOutCirc easeInExpo easeOutExpo easeInOutExpo easeInQuad easeOutQuad easeInOutQuad easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInSine easeOutSine easeInOutSine easeInBack easeOutBack easeInOutBack pauseOnHover: false // Pause when user hovers the slide container }; $(".slider").simpleSlider(options);}); |
控制滑块
你必须有dom元素的数据如果你想控制滑块。下面的代码显示了如何做到这一点
1 2 3 4 5 6 7 | $(document).ready(function(){ $(".slider").simpleSlider(); var slider = $(".slider").data("simpleslider"); slider.nextSlide(); // Go to the next slide slider.prevSlide(); // Go to the previous slide slider.nextSlide(slidenumber); // Go to the given slide}); |
如果启用了滑块与list-items自动创建一个列表,您可以使用它们来控制滑块。
事件
SimpleSlider将引发beforeSliding和afterSliding事件。您可以使用下面的代码绑定这些:
1 2 3 4 5 6 7 8 9 | $(".slider").simpleSlider(); $(".slider").on("beforeSliding", function(event){ // Event.prevSlide: previous slide ID // Event.newSlide: coming slide ID }); $(".slider").on("afterSliding", function(event){ // Event.prevSlide: previous slide ID // Event.newSlide: coming slide ID }); |
afterSliding动画完成后触发。
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： 自定义选择框
- 下一个特效： jquery旋转木马插件Tikslus Carousel