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

查看演示立即下载

插件描述：Simple jQuery CSS3滑块支持所有浏览器，并且简单实用

使用方法

添加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动画完成后触发。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：自定义选择框
下一个特效： jquery旋转木马插件Tikslus Carousel