特效介绍

RoundAbout幻灯片插件
基于jQuery的RoundAbout幻灯片插件,点击左右两边的小图,会向左或者向右滚动并放大,直到位置处于中间,停止滚动。
使用方法
1、在head之间引入css和js:
<link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="https://5.jimth.com/download/jquery/jquery-1.6.min.js"></script> <script type="text/javascript" src="js/roundabout.js"></script>2、在body加入html代码:
<div class="gallery">
<div id="gallery" class="wraper">
<ul id="myRoundabout">
<li><a href="https://5.jimth.com" title="我爱模板网" target="_blank"><img src="img/banner1.png" alt=""></a></li>
<li><a href="https://5.jimth.com" title="我爱模板网" target="_blank"><img src="img/banner2.png" alt=""></a></li>
<li><a href="https://5.jimth.com" title="我爱模板网" target="_blank"><img src="img/banner3.png" alt=""></a></li>
</ul>
</div>
</div>
3、在html下面加入调用的JS代码:
<script type="text/javascript">
$(function(){
$('#myRoundabout').roundabout({
minOpacity:.8, //后面图片的透明度
minScale:0.7 //缩放比例
});
window.___gcfg = {lang: 'zh-CN'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
})
</script>
参数已经在代码注释中说明,根据自己的需要设置。 