标签：图片跑马灯
jCarousel Lite 实现图片跑马灯效果
官方网站:http://www.gmarwaha.com/jquery/jcarousellite/
demo:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript" src="jquery.jcarousellite.js"></script>
<title>jCarousel Lite</title>
</head>
<body>
<div>
<a href="#" id="go1">1</a> <a href="#" id="go2">2</a> <a href="#"
id="go3">3</a>
<button id="product-show-next">向前</button>
<button id="product-show-prev">向后</button>
</div>
<div id="jCarouselLite">
<ul>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118" ></li>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118" ></li>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118"></li>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118"></li>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118"></li>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118"></li>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118"></li>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118"></li>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118"></li>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118"></li>
<li><img src="http://www.baidu.com/img/bdlogo.png" alt="" width="150" height="118"></li>
</ul>
</div>
<script type="text/javascript">
//图片跑马灯效果
$("#jCarouselLite").jCarouselLite({
auto : 800,
speed : 1000,
visible : 3,
start : 0,
btnGo : [ "#go1", "#go2", "#go3" ],
btnNext : "#product-show-next",
btnPrev : "#product-show-prev"
});
</script>
</body>
</html>
标签：图片跑马灯
原文地址：http://blog.csdn.net/graceup/article/details/42463587
