当前位置: 首页 > 工具软件 > liMarquee > 使用案例 >

bootstrap轮播图简单使用,liMarquee文字跑马灯的简单使用

卢朝
2023-12-01

1 轮播图

<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- 轮播图 -->
<div id="imgCircle" class="carousel slide" data-ride="carousel" data-interval="3000">
	<!-- 轮播(Carousel)指标 -->
	<ol class="carousel-indicators">
		<li data-target="#imgCircle" data-slide-to="0" class="active"></li>
		<li data-target="#imgCircle" data-slide-to="1"></li>
	</ol>   
	<!-- 轮播(Carousel)项目 -->
	<div class="carousel-inner">
		<div class="item active">
			<img src="image/bigImg.png" alt="First slide">
		</div>
		<div class="item">
			<img src="image/bigImg2.png" alt="Second slide">
		</div>
	</div>
	<!-- 轮播(Carousel)导航:就是左右箭头,可省略 -->
	<a class="carousel-control left" href="#imgCircle" 
		data-slide="prev">‹
	</a>
	<a class="carousel-control right" href="#imgCircle" 
		data-slide="next">›
	</a>
</div>

2 文字跑马灯

<link rel="stylesheet" href="css/liMarquee.css">
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.liMarquee.js"></script>

<script>
$(function(){
	$('.content').liMarquee();
});
</script>

<div class="content">

	<a href="#">百度</a>
	<a href="#">谷歌</a>
	<a href="#">淘宝</a>
	<a href="#">京东</a>
	<a href="#">豆瓣</a>
	<a href="#">天猫</a>
</div>


 类似资料: