jquery.superslide 轮播图案例

先看效果图

由于一选择截屏放在图片上的箭头就消失，所以手工绘制上去的

html布局

<div class="caseview col-md-9">
		<div class="panel">
			<div class="panel-heading">
				<h1 class="h1 text-center">布鲁克林</h1>
			</div>
			<p class="panel-body">
				</p><p>项目名称：布鲁克林建筑面积：400平米设计风格：美式风格主要材料：设计单位：北京四海润元装饰 工作室陶鸿设计说明：美式风格有着欧罗巴</p>
			<p></p>
			<div class="panel-footer">
				<span class="label label-primary">廊坊市</span>
				<span class="label label-primary">别墅</span>
				<span class="label label-primary">美式</span>
				<span class="label label-primary">400 平米</span>
			</div>
		</div>

		<div class="caseShow">
			<div id="picBox" class="picBox text-center" style="
    position: relative;
">
								<img src="http://localhost/uploadfile/2017/1212/20171212032640508.jpg" style="display: none;"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032640467.jpg"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032640914.jpg"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032640706.jpg"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032641218.jpg"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032641404.jpg"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032641806.jpg"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032641190.jpg"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032641913.jpg"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032641727.jpg"> 
								<img style="display: inline;" src="http://localhost/uploadfile/2017/1212/20171212032641409.jpg"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032642163.jpg"> 
								<img style="display: none;" src="http://localhost/uploadfile/2017/1212/20171212032642713.jpg"> 
								<a href="javascript:void(0)" class="arrow next" style="display: none;"></a>
				<a href="javascript:void(0)" class="arrow prev" style="display: none;"></a>
			</div>
			<div id="listBox" class="container listBox text-center">
				<div class="tempWrap" style="overflow:hidden; position:relative; width:490px"><ul class="hideList" style="width: 910px; left: -490px; position: relative; overflow: hidden; padding: 0px; margin: 0px;">
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032640508.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032640467.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032640914.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032640706.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032641218.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032641404.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032641806.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032641190.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032641913.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032641727.jpg">
					</li>
										<li class="picIterm on" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032641409.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032642163.jpg">
					</li>
										<li class="picIterm" style="float: left; width: 68px;">
						<img src="http://localhost/uploadfile/2017/1212/20171212032642713.jpg">
					</li>
									</ul></div>
				<a href="javascript:void(0)" class="arrow prevA"></a>
				<a href="javascript:void(0)" class="arrow nextA nextStop"></a>
			</div>
		</div>
	</div>

js    superslide版本2.1.1

<script type="text/javascript">
		//大图和文字切换
		jQuery(".caseShow").slide({
			titCell: ".listBox li",
			mainCell: ".picBox",
			autoPlay: true,
			trigger:'mouseover',
			delayTime: 100,
			startFun: function (i) {
				//控制小图自动翻页
				if (i == 0) {
					jQuery(".caseShow .prevA").click()
				} else if (i % 7 == 0) {
					jQuery(".caseShow .nextA").click()
				}
			}
		});
		//小图滚动
		jQuery(".caseShow").slide({
			mainCell: ".listBox ul",
			prevCell: ".prevA",
			nextCell: ".nextA",
			effect: "left",
			vis: 7,
			scroll: 7,
			delayTime: 0,
			autoPage: true,
			pnLoop: false
		});
	</script>

css就不提供了，太简单了，自己随意发挥吧