jCarousel Lite 实现图片跑马灯效果

最新推荐文章于 2019-10-23 20:11:47 发布

graceup

最新推荐文章于 2019-10-23 20:11:47 发布

阅读量1k

点赞数 1

分类专栏： js 文章标签：图片跑马灯

本文链接：https://blog.csdn.net/graceup/article/details/42463587

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>

graceup

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jCarousel Lite 实现图片跑马灯效果

jCarousel Lite 实现图片跑马灯效果官方网站:http://www.gmarwaha.com/jquery/jcarousellite/demo:jCarousel Lite 1 2 <a href="#" id="go3">3 向前向后
复制链接

扫一扫

专栏目录