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

本文介绍了如何在Bootstrap中创建轮播图,并详细讲解了liMarquee文字跑马灯的简单应用,为网页动态效果的实现提供了清晰的步骤和示例。
摘要由CSDN通过智能技术生成

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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值