所属分类:网页特效-焦点图/幻灯片,图片特效,触屏/拖拽/下拉
使用方法:
引入jQuery库文件、插件JS文件、CSS样式文件
<link href="css/zzsc.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="js/jquery-1.4.4.min.js" type="text/javascript">script>
<script language="javascript" src="js/m.index.js" type="text/javascript">script>
HTML部分
<div class="slide">
<div class="play">
<!--预览图+标题-->
<ul id="pnl_scroll">
<li><a href="http://www.sucainiu.com/" target="_blank">
<img height="350" width="565" src="img/wKgB3FGQyTiAeqAEAAFRtgkR-7g72.jpeg"></a>
<div class="info">图片来自于川藏线,此目的地共收藏了121270张川藏线图片。</div>
</li>
<li><a href="http://www.sucainiu.com/" target="_blank">
<img height="350" width="565" src="img/wKgB3FGR1BKAc2VwAAGEJQW_WEQ85.jpeg"></a>
<div class="info">图片来自于川藏线,此目的地共收藏了121270张川藏线图片。</div>
</li>
<li><a href="http://www.sucainiu.com/" target="_blank">
<img height="350" width="565" src="img/wKgB3FGTaRiAcz2eAAHSmlouRZw57.jpeg"></a>
<div class="info">图片来自于川藏线,此目的地共收藏了121270张川藏线图片。</div>
</li>
<li><a href="http://www.sucainiu.com/" target="_blank">
<img height="350" width="565" src="img/wKgB3FGTZ6SAcLg5AAG4LbVzdco65.jpeg"></a>
<div class="info">图片来自于川藏线,此目的地共收藏了121270张川藏线图片。</div>
</li>
<li><a href="http://www.sucainiu.com/" target="_blank">
<img height="350" width="565" src="img/wKgB3FGR5NOAAiYwAAKlG5Dnu1873.jpeg"></a>
<div class="info">图片来自于川藏线,此目的地共收藏了121270张川藏线图片。</div>
</li>
</ul>
</div>
<div class="tab">
<!--缩略图-->
<ul id="pnl_btn">
<li>
<a href="javascript:void(0);" onclick class="on">
<img src="img/wKgB3FGQyTiAeqAEAAFRtgkR-7g72.index.w108.jpeg"></a></li>
<li>
<a href="javascript:void(0);" onclick class="on">
<img src="img/wKgB3FGR1BKAc2VwAAGEJQW_WEQ85.index.w108.jpeg"></a></li>
<li>
<a href="javascript:void(0);" onclick class="on">
<img src="img/wKgB3FGTaRiAcz2eAAHSmlouRZw57.index.w108.jpeg"></a></li>
<li>
<a href="javascript:void(0);" onclick class="on">
<img src="img/wKgB3FGTZ6SAcLg5AAG4LbVzdco65.index.w108.jpeg"></a></li>
<li>
<a href="javascript:void(0);" onclick class="on">
<img src="img/wKgB3FGR5NOAAiYwAAKlG5Dnu1873.index.w108.jpeg"></a></li>
</ul>
</div>
</div>
就是这么的简单!