jquery轮播图插件unslider

                所属分类:媒体-幻灯片和轮播图

                 351119  530  查看评论 (87)
                分享到微?#25490;?#21451;圈
                X
                jquery轮播图插件unslider ie兼容6

                举一个最常见的轮播图例子,五张轮播图 + 圆点指示器 + 左右箭头。

                <!-- 首先引入jQuery和unslider -->
                <script src="jquery-1.11.1.min.js"></script>
                <script src="unslider.min.js"></script>
                <!-- 写点样式,让轮播好看点 -->
                ul, ol { padding: 0;}
                .banner { position: relative; overflow: auto; text-align: center;}
                .banner li { list-style: none; }
                .banner ul li { float: left; }
                #b04 { width: 640px;}
                #b04 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
                #b04 .dots li 
                { 
                	display: inline-block; 
                	width: 10px; 
                	height: 10px; 
                	margin: 0 4px; 
                	text-indent: -999em; 
                	border: 2px solid #fff; 
                	border-radius: 6px; 
                	cursor: pointer; 
                	opacity: .4; 
                	-webkit-transition: background .5s, opacity .5s; 
                	-moz-transition: background .5s, opacity .5s; 
                	transition: background .5s, opacity .5s;
                }
                #b04 .dots li.active 
                {
                	background: #fff;
                	opacity: 1;
                }
                #b04 .arrow { position: absolute; top: 200px;}
                #b04 #al { left: 15px;}
                #b04 #ar { right: 15px;}
                <!-- 把要轮播的地方写上来 -->
                <div class="banner" id="b04">
                    <ul>
                        <li><img src="01.jpg" alt="" width="640" height="480" ></li>
                        <li><img src="02.jpg" alt="" width="640" height="480" ></li>
                        <li><img src="03.jpg" alt="" width="640" height="480" ></li>
                        <li><img src="04.jpg" alt="" width="640" height="480" ></li>
                        <li><img src="05.jpg" alt="" width="640" height="480" ></li>
                    </ul>
                    <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="20" height="35"></a>
                    <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="20" height="37"></a>
                </div>
                //最后用js控制
                $(document).ready(function(e) {
                    var unslider04 = $('#b04').unslider({
                		dots: true
                	}),
                	data04 = unslider04.data('unslider');
                	
                	$('.unslider-arrow04').click(function() {
                        var fn = this.className.split(' ')[1];
                        data04[fn]();
                    });
                });

                就这么简单~~

                相关插件-幻灯片和轮播图

                jQuery带缩略图轮播图插件SliderPro

                jQuery基于SliderPro实现的左右布局带缩略图轮播图效果
                  幻灯片和轮播图
                 26637  213

                3D轮播幻灯片

                支持多种3D轮播切换特效
                  幻灯片和轮播图
                 28846  387

                原生js实现轮播插件(支持左右箭头、圆点按钮、兼容IE8)(原创)

                支持左右箭头、圆点按钮、代码注释全、可控效果按钮接口、简单语法、兼容IE8
                  幻灯片和轮播图
                 11043  88

                针对移动设备的手动切换插件

                该插件可以将浏览器中的元素集合像卡片一样通过手势切换,在电脑和移动设备上均可使用。
                  幻灯片和轮播图
                 19523  134

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

                  外科医生1341937637 0
                  2019/4/10 14:57:16
                  阿尘 0
                  2018/10/17 16:00:25
                  感觉和新手做的一样,轮回播放看的很揪?#27169;?回复
                  橙熟?? 0
                  2018/9/8 15:12:26
                  图片的大小在哪设置?
                  回复
                  稻草lemon 0
                  2018/8/30 18:56:31
                  新的chrome浏览器图片只占?#35805;?= =! 回复
                  ?? 0
                  2018/8/13 11:00:03
                  为什么说unslider这个不是一个方法 我的js也引用正确了 一切都是ctrl+c 然后ctrl+v的
                  为什么不正确的 在线求解~!!!!! 回复
                  蝴蝶3614 0
                  2018/8/7 11:51:35
                  这个插件的li的内容如果是动态添加的,还可以使用吗
                      BattleofLexington0
                      2018/8/7 11:55:07
                      可以了,只要在插件加载前把内容加进去就行了
                  回复
                  勿忘心安 0
                  2018/7/14 19:48:06
                  不让自动轮播怎么做 回复
                  Nash 0
                  2018/7/9 18:28:34
                  当页面一进去的时候,第一张图的高度会短一点点,但是第一张图再次轮播的时候,高度就正常,这是怎么回事?有人遇到过吗? 回复
                  iroha! 0
                  2018/5/26 11:07:42
                  为啥浏览器上打开直接就五幅图出来了 一点箭?#20998;?#25509;白屏了。。 回复
                  看破?#22238;计?0
                  2018/5/7 16:15:50
                  为什么插入
                  这段代码会报错 回复
                取消回复
                快3倍投资金计划

                                            爱彩网双色球基本走势图 北京时时彩几号开奖时间 黑龙江11选5任选5码最大遗漏 三张牌比大小怎么赢钱 搜狐彩票红包 云南时时彩多久开奖一次 天津快乐十分开奖结果查询 有极速快3的网站平台 棋牌百人牛牛有漏洞吗 福建十一选五开奖结果 今天河南快3开奖结果 双色球红球振幅第三位走势图 白小姐6合规律 三肖中特期期准四不像六肖 吉林时时彩是什么意思