jQuery轮播图插件JSlider

                所属分类?#22909;教?幻灯片和轮播图,滑块和旋转

                 13672  80  查看评论 (1)
                分享到微?#25490;?#21451;圈
                X
                jQuery轮播图插件JSlider ie兼容9

                JSlider

                jSlider是一款高级jQuery轮播图插件,它可以帮助您在几分钟内在网站上嵌入一个完整的功能滑块。您将不再需要编写复杂的脚本来使滑块运行。 现在通过HTML属性和CSS很容易。

                轻量级,压缩后的版本仅3.6KB。

                支持IE8+, Chrome, FireFox, Safari, Opera, Edge浏览器。

                支持iOS 和 Android等移动设备。

                支持5种动画效果。

                使用方法

                在页面中引入jSlider.css和jQuery、jquery.jSlider.js文件。

                <link rel="stylesheet" type="text/css" href="assets/css/jSlider.css" />
                <script type="text/javascript" src="assets/js/jquery-latest.min.js"></script>
                <script type="text/javascript" src="assets/js/jquery.jSlider.js"></script>

                 HTML结构

                轮播图的基本HTML结构如下:

                <div id="slider1" class="jSlider" data-loop="true">
                    <div><img src="images/photo1.jpg" alt="" /></div>
                    <div><img src="images/photo2.jpg" alt="" /></div>
                    <div>
                        <img src="images/photo3.jpg" alt="" />
                        <div class="sub-content-sample">
                            <p>Lorem ipsum dolor sit amet</p>
                        </div>
                    </div>
                    <div><img src="images/photo4.jpg" alt="" /></div>
                    <div><img src="images/photo5.jpg" alt="" /></div>
                    <div><img src="images/photo6.jpg" alt="" /></div>
                </div>

                如果需要在轮播图的某个项上制作动画元素,它的HTML结构如下:

                <div id="slider1" class="jSlider" data-delay="0">
                    <div><img src="images/photo1.jpg" alt="" /></div>
                    <div class="selected">
                        <h3 class="appear-top">This is the slide title!</h3>
                        <h4 class="appear-right">This can be moved after the slide is showed...</h4>
                        <p  class="appear-left">...in different directions...</p>
                        <p  class="appear-bottom">...and with different animation effects</p>
                        <h5 class="appear-fade">powered by jSlider!</h5>
                        <img src="images/photo2.jpg" alt="" />
                    </div>
                    <div><img src="images/photo3.jpg" alt="" /></div>
                    <div><img src="images/photo4.jpg" alt="" /></div>
                    <div><img src="images/photo5.jpg" alt="" /></div>
                    <div><img src="images/photo6.jpg" alt="" /></div>
                </div>

                使用DATA属性

                jSlider的配置参数通过data-*属性来控制。

                <div id="slider1" class="jSlider" data-navigation="always" data-indicator="none">

                可用的data-*属?#26434;校?/p>

                • data-navigation:控制是否显示前后导航按钮。值可以设置为"always", "none" 或 "hover"。

                • data-indicator:控制是否显示圆点导航按钮。值可以设置为"always", "none" 或 "hover"。

                • data-speed:控制轮播图的切换速度,单位毫秒。默?#29616;?#20026;500。

                • data-delay:控制轮播图的播放速度,单位毫秒,默?#29616;?#20026;5000。

                • data-transition:控制轮播图的动画过渡类?#20572;?#20540;可以设置为"slide" 或 "fade"。

                • data-loop:控制轮播图是否循环播放。

                • data-group:该属性在gallery模式下使用。用于将图片进行分组。

                相关插件-幻灯片和轮播图,滑块和旋转

                5种jQuery超酷3d幻灯片效果

                flux.js是一款能做出3D效果的jQuery幻灯片插件。这款jQuery幻灯片插件共有5种效果:爆炸效果、3D翻转效果、3D旋转效果、立方体效果和翻页效果。需要注意的是flux需要浏览器支持CSS3 transitions才能正常工作。
                  幻灯片和轮播图
                 16627  198

                jquery 幻灯片以及tabs切换插件

                jquery 幻灯片以及tabs切换插件
                  幻灯片和轮播图
                 13267  121

                jQuery幻灯插件

                号称世界最棒的jQuery幻灯插件 16种幻灯变化的特效 简单并且配置灵活 体积小并且符合语义
                  幻灯片和轮播图
                 17709  128

                js简单的banner图片切换焦点图代码

                js简单的banner图片切换焦点图代码
                  幻灯片和轮播图
                 20163  112

                讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

                  qnmlb 0
                  2019/4/10 10:58:46
                  有人用过这个插件么?为什么在ie9下初始化之后没有效果 回复
                取消回复
                  短信接口
                快3倍投资金计划

                                            免费一肖中特 什么是时时彩 四川金7乐组六实战技巧 中国足彩网八方预测 曾道人137期现场开奖 福建时时彩平台推荐 黑龙江快乐十分中奖 彩票中奖新闻 体育彩票超级大乐透开奖结果 MG线上娱乐app 福彩3d基本上走势图 山东体育彩票快乐扑克3 体彩十一运夺金彩票 彩票怎么看 浙江舟山体彩飞鱼