jquery轮播图插件unslider

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

 405822  748  查看评论 (90)
分享到微信朋友圈
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]();
    });
});

就这么简单~~

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

兼容ie7十来种3d轮播切换效果

兼容ie7十来种3d轮播切换效果,支持触摸切换,用代码给你flash的感觉
  幻灯片和轮播图
 36322  430

jQuery手机触屏滑动的响应式图片轮播效果

jQuery响应式图片插件,多种图片滑动轮播切换,兼容手机端的触屏滑动图片切换代码。
  幻灯片和轮播图
 58714  443

魔兽世界轮播图

很简单的一款小插件 希望大家喜欢
  幻灯片和轮播图
 22105  269

jQuery无缝滚动轮播图(原创)

各大网站常用的轮播图滚动效果,自动轮播,左右按钮切换
  幻灯片和轮播图
 15551  176

讨论这个项目(90)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    solenmm 0
    2019/9/20 11:31:14
    到最后一张了,完事向后接着播放第一张不能吗?还得向前回到第一张?!?! 回复
    无知 0
    2019/8/1 11:46:36
    为什么我的图片第一张 不显示 过一会 直接到第二张 完了在魂环后第一张就好了 回复
    外科医生1341937637 0
    2019/4/10 14:57:16
    阿尘 0
    2018/10/17 16:00:25
    感觉和新手做的一样,轮回播放看的很揪心, 回复
    橙熟?? 0
    2018/9/8 15:12:26
    图片的大小在哪设置?
    回复
    稻草lemon 0
    2018/8/30 18:56:31
    新的chrome浏览器图片只占一半 = =! 回复
    ?? 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
    不让自动轮播怎么做
        王世杰0
        2021/7/14 14:47:26
        去掉控制滚动部分的jquery代码?感觉他这个怪怪的
        😵
    回复
    Nash 0
    2018/7/9 18:28:34
    当页面一进去的时候,第一张图的高度会短一点点,但是第一张图再次轮播的时候,高度就正常,这是怎么回事?有人遇到过吗? 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复