RoundAbout幻灯片插件

        基于jQuery的RoundAbout幻灯片插件，点击左右两边的小图，会向左或者向右滚动并放大，直到位置处于中间，停止滚动。
1、在head之间引入css和js：

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="http://www.5imoban.net/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="http://www.5imoban.net" title="我爱模板网" target="_blank"><img src="img/banner1.png" alt=""></a></li>
            <li><a href="http://www.5imoban.net" title="我爱模板网" target="_blank"><img src="img/banner2.png" alt=""></a></li>
            <li><a href="http://www.5imoban.net" 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>

参数已经在代码注释中说明，根据自己的需要设置。

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！