jQuery和css3全屏幻灯片插件

使用这款插件首先要引入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为slider和slide，你可以通过插件的选项来改变它们。

<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