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焦点图轮播插件
![AGI 之 【Hugging Face】 的【零样本和少样本学习】之一 [构建标记任务] / [ 基线模型 ] 的简单整理](https://i-blog.csdnimg.cn/direct/e7edf60e2c134c789d7b6631313e8a28.png)
