注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery简单的CSS3轮播图插件simpleSlider

jQuery插件 fishcity 4518浏览

jQuery简单的CSS3轮播图插件simpleSlider

simple jQuery slider是一款基于jquery的CSS3幻灯片插件,它兼容所有浏览器,包括可使用于触屏设备。simple jQuery slider虽简单但功能强大,它是全屏的图片效果,文字与图片分离,使用动感的切换效果,非常大气,简洁。

使用方法

引入jQuery,simpleSlider.js,touchSwipe.js(可选引入,用于支持触摸屏)和transit.js在页面head中。插件会自动改变useTransitionEnd属性为true,如你不想用,可以设置updateTransit:false来禁用。

<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来包含幻灯片所有的html结构,并给div添加个类名,建议使用标准类名.slider或.slide

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

写入JS,调用插件

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

自定义选项

$(document).ready(function(){
    // 默认选项
    var options = {
        slides: '.slide', // 幻灯片容器的名称,即是幻灯片DIV的类名
        swipe: true,    // 是否支持触屏,需要引入touchSwipe 
        slideTracker: true, // 添加一个UL跟踪(存放)当前幻灯片列表项
        slideTrackerID: 'slideposition', // 上面UL的类名
        slideOnInterval: true, // 自动播入
        interval: 5000, // 播入的间隔时间
        animateDuration: 1500, // 动画时间
        animationEasing: 'easeInOut', // 动画的方式,支持选项: 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 // 鼠标悬浮时停止播放
    };
    $(".slider").simpleSlider(options);
});

转载请注明:jQ酷 » jQuery简单的CSS3轮播图插件simpleSlider

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。