BootStrap轮播图和实现时间间隔修改的两种方式

最新推荐文章于 2024-05-28 19:26:08 发布

没事多喝水w

最新推荐文章于 2024-05-28 19:26:08 发布

阅读量2.2k

点赞数

分类专栏： JavaScript 文章标签： javascript bootstrap html

wang

本文链接：https://blog.csdn.net/w_sl_code/article/details/105287245

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
	<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
	<!-- 设置滑动的时间间隔-->
		$(function(){
			$('#carousel-example-generic').carousel({
				interval:500,
				});
		});
	</script>
  </head>
  <body>
    <div style="width: 532px;height: 300px;">
		
		<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
		  <!-- 小圆点 -->
		 <ol class="carousel-indicators">
		    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
		    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
		    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
		  </ol> 
		
		  <!-- 每一个模块 -->
		  <div class="carousel-inner" role="listbox">
		    <div class="item active">
		      <img src="img/1.jpg" width="100%" height="100%" alt="...">
		      <div class="carousel-caption">
		        <!-- 显示文字 -->
		        ----
		      </div>
		    </div>
		    <div class="item">
		      <img src="img/2.jpg" width="100%" height="100%" alt="...">
		      <div class="carousel-caption">
		        ...
		      </div>
		    </div>
		   <div class="item">
		     <img src="img/3.jpg" width="100%" height="100%" alt="...">
		     <div class="carousel-caption">
				...
		     </div>
		   </div>
		  </div>
		
		  <!-- 左右 -->
		  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
		    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
		    <span class="sr-only">Previous</span>
		  </a>
		  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
		    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
		    <span class="sr-only">Next</span>
		  </a>
		</div>
	</div>
  </body>
</html>

没事多喝水w

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
BootStrap轮播图和实现时间间隔修改的两种方式

效果<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content...
复制链接

扫一扫

专栏目录