jQuery滑块（轮播图）插件simpleSlider.js

 查看演示  website  立即下载

使用方法

添加jQuery,simpleSlider.js,touchSwipe.js(可选,如果你想要支持触摸)和transit.js在页面head中。滑块会自动改变useTransitionEnd属性为true。您可以通过设置禁用这个updateTransit:错误的选项。

<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'>

<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>

创建滑块

$(document).ready(function(){
    $(".slider").simpleSlider();
});

自定义选项

您还可以控制simpleSlider的选项。只是对象的选项解析成simpleSlider()。

$(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元素的数据如果你想控制滑块。下面的代码显示了如何做到这一点

$(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事件。您可以使用下面的代码绑定这些:

    $(".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动画完成后触发。

PREVIOUS:
NEXT:
jquery旋转木马插件Tikslus Carousel
自定义选择框