使用这款插件首先要引入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