terseBanner焦点图轮播插件，先来看看效果：
部分核心的代码如下(全部代码在文章末尾)：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>terseBanner-简洁优雅的jquery轮播图插件</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="side">
<h1>简洁优雅的轮播插件</h1>
<div class="anchor">
<a href="#anchor-2">自定义样式</a>
<a href="#anchor-3">动画</a>
<a href="#anchor-4">缩略图</a>
<a href="#anchor-5">自适应</a>
<a href="#anchor-6">延迟加载</a>
<a href="#anchor-7">切换</a>
<a href="#anchor-8">回调函数</a>
<a href="#anchor-9">参数列表</a>
</div>
</div>
<div class="main">
<div class="container top">
<p>
相对于大部分轮播插件来说，terseBanner删除了很多不实用或很少用的功能，只保留了最常用的，使用方便，功能完善，可以满足绝大多数网站的需求<br>
支持 ie8 浏览器，支持触屏事件
</p>
<div class="banner" id="top">
<ul>
<li><img src="img/banner-1.jpg"></li>
<li><img src="img/banner-2.jpg"></li>
<li><img src="img/banner-3.jpg"></li>
<li><img src="img/banner-4.jpg"></li>
<li><img src="img/banner-5.jpg"></li>
<li><img src="img/banner-6.jpg"></li>
</ul>
</div>
<div class="code">
<pre><code>
<style>
.banner{width: 960px;height: 540px;}
</style>
<div class="banner">
<ul>
<li><img src="img/banner-1.jpg"></li>
<li><img src="img/banner-2.jpg"></li>
<li><img src="img/banner-3.jpg"></li>
<li><img src="img/banner-4.jpg"></li>
<li><img src="img/banner-5.jpg"></li>
<li><img src="img/banner-6.jpg"></li>
</ul>
</div>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.terseBanner.min.js"></script>
<script>
$('.banner').terseBanner();
</script>
</code></pre>
</div>
</div>
<div class="container custom" id="anchor-2">
<h2>自定义样式</h2>
<p>也可以使用自定义的样式来覆盖默认的样式（在默认样式的选择器前面再加一级）</p>
<div class="banner" id="custom">
<ul>
<li><img src="img/banner-1.jpg"></li>
<li><img src="img/banner-2.jpg"></li>
<li><img src="img/banner-3.jpg"></li>
<li><img src="img/banner-4.jpg"></li>
<li><img src="img/banner-5.jpg"></li>
<li><img src="img/banner-6.jpg"></li>
</ul>
</div>
<div class="code">
<pre><code>
.custom .tb-arrow a{
width: 64px;
height: 64px;
margin: 0 20px;
opacity: 0;
-webkit-transition: all .3s;
transition: all .3s;
}
/* ... */
.custom .tb-btn{
bottom: 0;
height: 10px;
}
.custom .tb-btn a{
width: 160px;
margin: 0;
box-sizing: border-box;
background: #666;
border-right: 1px solid #fff;
border-radius: 0;
}
/* ... */
</code></pre>
</div>
</div>
<div class="container animation" id="anchor-3">
<h2>动画</h2>
<p>4种动画方式：<b>slide, fade, flash, none</b>（flash模式是fade模式的简化，图片切换时可以出现闪烁的白色背景）
<br>PS：slide模式不支持垂直方向的滑动</p>
<div class="select">
<span>fade</span>
<ul>
<li>slide</li>
<li>fade</li>
<li>flash</li>
<li>none</li>
</ul>
</div>
<div class="banner" id="animation">
<ul>
<li><img src="img/banner-1.jpg"></li>
<li><img src="img/banner-2.jpg"></li>
<li><img src="img/banner-3.jpg"></li>
<li><img src="img/banner-4.jpg"></li>
<li><img src="img/banner-5.jpg"></li>
<li><img src="img/banner-6.jpg"></li>
</ul>
</div>
</div>
<div class="container thumbnail" id="anchor-4">
<h2>缩略图</h2>
<p>自动截取原始图片的一部分作为缩略图，缩略图列表超出容器时自动添加列表滑动按钮</p>
<div class="clearfix">
<div class="banner" id="thumbnail">
<ul>
<li><img src="img/banner-1.jpg"></li>
<li><img src="img/banner-2.jpg"></li>
<li><img src="img/banner-3.jpg"></li>
<li><img src="img/banner-4.jpg"></li>
<li><img src="img/banner-5.jpg"></li>
<li><img src="img/banner-6.jpg"></li>
</ul>
</div>
<div class="code">
<pre><code>
$('#thumbnail').terseBanner({
btn: false,
thumb: {
width: 150,
height: 84,
gap: 4,
visible: 3
}
});
</code></pre>
</div>
</div>
<div class="clearfix">
<p><br>也可以手动设置每一张缩略图,在原始图片的地址后面加上 <b>?thumb=...</b></p>
<div class="code">
<pre><code>
<div class="banner" id="thumbnail">
<ul>
<li><img src="img/banner-1.jpg?thumb=img/thumb-1.jpg"></li>
<li><img src="img/banner-2.jpg?thumb=img/thumb-2.jpg"></li>
<li><img src="img/banner-3.jpg?thumb=img/thumb-3.jpg"></li>
<!-- ... -->
</ul>
</div>
</code></pre>
</div>
</div>
</div>
<div class="container adaptive" id="anchor-5">
<h2>自适应</h2>
<p>让图片自适应轮播的宽度,可以用来满屏显示图片（使用此功能时，缩略图功能将会被禁用）</p>
<div class="scale">
<span>改变轮播的宽度：</span>
<a>→ ←</a>
<a class="larger">← →</a>
</div>
<a class="widescreen">宽屏演示</a>
<div class="banner" id="adaptive">
<ul>
<li><img src="img/banner-1.jpg"></li>
<li><img src="img/banner-2.jpg"></li>
<li><img src="img/banner-3.jpg"></li>
<li><img src="img/banner-4.jpg"></li>
<li><img src="img/banner-5.jpg"></li>
<li><img src="img/banner-6.jpg"></li>
</ul>
</div>
</div>
<div class="container lazyload" id="anchor-6">
<h2>延迟加载</h2>
<p>减少大图片的单张加载时间（有默认的loading动画）<br>
把图片的 <b>src</b> 属性换成 <b>data-src</b> 即可</p>
<a class="reload">重新加载大图</a>
<div class="banner" id="lazyload">
<ul>
<li><img data-src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/02/ChMkJ1bxATiIVlzmAAlJIHaXmLkAAOTUgN32YEACUk4716.jpg"></li>
<li><img data-src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/02/ChMkJ1bxATaIevuuABYRrSzYfikAAOTUgI7dk0AFhHF290.jpg"></li>
<li><img data-src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/02/ChMkJ1bxATyIHmOaAA427DMtOHcAAOTUwGiFqgADjcE489.jpg"></li>
<li><img data-src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/02/ChMkJlbxAUCIMqKdAAMVx51HXogAAOTUwP6tOQAAxXf894.jpg"></li>
<li><img data-src="http://desk.fd.zol-img.com.cn/t_s1920x1080c5/g5/M00/05/02/ChMkJlbxATqIBOwbAAt1D9lCvKkAAOTUwB9S5IAC3Un823.jpg"></li>
</ul>
</div>
<div class="code">
<pre><code>
<div class="banner" id="lazyload">
<ul>
<li><img data-src="img/banner-1.jpg"></li>
<li><img data-src="img/banner-2.jpg"></li>
<li><img data-src="img/banner-3.jpg"></li>
<!-- ... -->
</ul>
</div>
</code></pre>
</div>
</div>
<div class="container switch" id="anchor-7">
<h2>切换</h2>
<p>可以在自定义的事件中切换轮播图片，给方法 terseBanner() 传递一个参数：<b>'prev' | 'next' | [Number]</b></p>
<div class="btn">
<a class="prev">prev</a>
<ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
<a class="next">next</a>
</div>
<div class="banner" id="switch">
<ul>
<li><img src="img/banner-1.jpg"></li>
<li><img src="img/banner-2.jpg"></li>
<li><img src="img/banner-3.jpg"></li>
<li><img src="img/banner-4.jpg"></li>
<li><img src="img/banner-5.jpg"></li>
<li><img src="img/banner-6.jpg"></li>
</ul>
</div>
<div class="code">
<pre><code>
$('.switch .btn .prev').click(function() {
$('#switch').terseBanner('prev');
});
$('.switch .btn .next').click(function() {
$('#switch').terseBanner('next');
});
$('.switch .btn ul li').click(function() {
$('#switch').terseBanner(parseInt($(this).text()));
});
</code></pre>
</div>
</div>
<div class="container callback" id="anchor-8">
<h2>回调函数</h2>
<p><b>init</b>, <b>before</b>, <b>after</b><br>
可以传入的参数为 <b>$banner, $item, currentIndex</b>（参数说明在参数列表中）</p>
<div class="banner" id="callback">
<ul>
<li><img src="img/banner-1.jpg"></li>
<li><img src="img/banner-2.jpg"></li>
<li><img src="img/banner-3.jpg"></li>
<li><img src="img/banner-4.jpg"></li>
<li><img src="img/banner-5.jpg"></li>
<li><img src="img/banner-6.jpg"></li>
</ul>
</div>
<div class="code">
<pre><code>
$('#callback').terseBanner({
arrow: true,
init: function ($banner, $item) {
$item.each(function(i) {
$(this).append('<em>' + (i + 1) +'</e>>');
});
},
before: function ($banner, $item, currentIndex) {
$item.eq(currentIndex).find('em').css({
top: -120,
opacity: 0
});
},
after: function ($banner, $item, currentIndex) {
$item.eq(currentIndex).find('em').css({
top: 210,
opacity: 1
});
}
});
</code></pre>
</div>
</div>
</div>
<script type="text/javascript" src="lib/highlight.pack.js"></script>
<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="lib/jquery-1.11.0.min.js"><\/script>')</script>
<script type="text/javascript" src="dist/jquery.terseBanner.min.js"></script>
<script type="text/javascript" src="lib/script.js"></script>
</body>
</html>全部代码：terseBanner焦点图轮播插件
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
