jquery轮播图插件unslider

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

 239724  350  查看评论 (73)
jquery轮播图插件unslider ie兼容6

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

<!-- 首先引入jQuery和unslider -->
<script src="jquery-1.11.1.min.js"></script>
<script src="unslider.min.js"></script>
<!-- 写点样式,让轮播好看点 -->
<style>
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;}
</style>
<!-- 把要轮播的地方写上来 -->
<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控制 -->
<script>
$(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]();
    });
});
</script>

就这么简单~~

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

anoSlide演示8种焦点图轮播效果

anoSlide演示8种焦点图轮播效果
  幻灯片和轮播图
 7179  42

仿360新闻图文混排焦点图

仿360新闻图文混排焦点图,兼容ie6
  幻灯片和轮播图
 7603  64

迅雷首页官网多图焦点图特效

模拟迅雷首页的幻灯片切换效果
  幻灯片和轮播图
 17005  53

jquery仿QQ音乐精彩推荐的数组方式轮播

这个是通过数组的原理实现的改变数组的排序元素的class也随之更改产生轮播的效果(代码注释很全,修改方便)
  幻灯片和轮播图
 13852  143

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

    一夕流年╁ 0
    2018/4/10 16:28:15
    怎样实现无缝轮播呢? 回复
    一夕流年╁ 0
    2018/4/10 14:56:29
    怎么关掉鼠标悬停呢 默认鼠标放上去是不轮播的 回复
    程序-沈乐媛 0
    2018/3/24 13:56:15
    追梦了无痕 0
    2018/1/16 14:52:01

    这个怎么兼容ie7  ie8

        天青色0
        2018/3/15 17:59:25
        同问,解决了吗?老哥
    回复
    NO.1 0
    2018/1/16 12:36:16

    键盘左右键切换之后,就不自动滚动了

    回复
    0
    2018/1/10 10:31:34

    无法解决无缝衔接吗

        一夕流年╁0
        2018/4/12 17:36:19
        无法,我已经更换了另一个轮播插件,这个哪都好就是不能无缝轮播
    回复
    小胖墩 0
    2018/1/5 23:52:37

    为什么我的在dw上可以轮播 ,到浏览器就不行

    回复
    xiaominstyle 0
    2017/11/30 14:19:13
    无缝轮播怎么更改,自动播放到最后一张直接向左跳到第一张了 回复
    0
    2017/11/3 17:02:07

    如何控制轮播时间

        程序-沈乐媛0
        2018/3/24 13:55:41
        CSS 控制的
    回复
    Lemon5970 0
    2017/11/1 15:04:54

    为什么我没有那个箭头

    回复
取消回复