首页 > 特效插件 > 滚动轮播 >  RoundAbout幻灯片插件正文

RoundAbout幻灯片插件

特效介绍

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>
参数已经在代码注释中说明,根据自己的需要设置。