jQuery和css3全屏幻灯片插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jQuery和css3全屏幻灯片插件
jQuery和css3全屏幻灯片插件
分享:

    插件介绍

    这是一款简单的jQuery和css3全屏幻灯片插件。这款幻灯片插件可以通过点击导航按钮进行幻灯片切换或设置为自动播放模式。

    浏览器兼容性

    浏览器兼容性
    时间:11-07
    阅读:

简要教程

使用这款插件首先要引入jQuery, simpleSlider.js, touchSwipe.js(如果你需要触摸设备的支持)。

如果设置useTransitionEnd首先为true,幻灯片将自动播放。

引入需要的文件

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript" src="transit.js"></script>
<script type="text/javascript" src="touchswipe.js"></script>
<script type="text/javascript" src="jquery.simpleslider.js"></script>
                

HTML

默认的包裹div的class为sliderslide,你可以通过插件的选项来改变它们。

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

更多详细信息请参考:https://github.com/dirkgroenen/simple-jQuery-slider