jQuery和css3全屏幻灯片插件

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

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2014-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

贵州快3

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!