简单轮播图实现原理详解

最新推荐文章于 2024-07-25 11:26:35 发布

时光Timely

最新推荐文章于 2024-07-25 11:26:35 发布

阅读量1w

点赞数 9

文章标签：轮播 html

本文链接：https://blog.csdn.net/Smtime826/article/details/81564178

版权

HTML 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

轮播图实现思路：

第一步：设计轮播图片的容器；

注意：data-ride="carousel"属性表示在页面加载时就开始动画播放。

第二步：设计轮播图片计数器；

<ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
</ol>

第三步：设计轮播图片播放区即图片容器（放入需要播放的图片）；

<div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="img/zz1.jpg">
        <div class="carousel-caption">
            <h4>Number1</h4>
            <p>我的意中人是一个盖世英雄，有一天，他会驾着七彩祥云来娶我.....</p>
        </div>
    </div>
    <div class="item">
        <img src="img/z1.jpg" >
        <div class="carousel-caption">
            <h4>Number2</h4>
            <p>紫霞</p>
        </div>
    </div>
</div>

第四步：设计轮播图片的左右控制区（left carousel-control控制向前）；

完整代码过程如下：

<!DOCTYPE html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
		<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
		<link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
		<script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>			
<style>
	 div.item img{
	   width:100%;
	  }
	 div#myCarousel{
	   top: 50px;
	   width:40%;
	   margin:0 auto;
	 } 
</style>
<div id="myCarousel" class="carousel" data-ride="carousel"><!--设计轮播图片的容器为class="carousel"-->
	  <ol class="carousel-indicators"><!--设计轮播图片计数器 class="caroousel-indicators"-->
			    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			    <li data-target="#myCarousel" data-slide-to="1"></li>
			    <li data-target="#myCarousel" data-slide-to="2"></li>
			    <li data-target="#myCarousel" data-slide-to="3"></li>
	  </ol>
  <!--设计轮播图片播放区，使用carousel-inner来控制， Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
		    <div class="item active">
		        <img src="img/zz1.jpg">
		        <div class="carousel-caption">
				 <h4>Number1</h4>
		 		 <p>我的意中人是一个盖世英雄，有一天，他会驾着七彩祥云来娶我.....</p>
		        </div>
		    </div>
		    <div class="item">
		        <img src="img/z1.jpg" >
		        <div class="carousel-caption">
				<h4>Number2</h4>
				 <p>紫霞</p>
			</div>
		    </div>
		    <div class="item">
		        <img src="img/b1.jpg" >
		        <div class="carousel-caption">
				<h4>Number3</h4>
				<p>至尊宝</p>
			</div>
		    </div>
	            <div class="item">
	                <img src="img/hh1.jpg" >
	                <div class="carousel-caption">
			        <h4>Number4</h4>
			        <p>哈哈哈哈哈</p>
		        </div>
 </div>
</div>
<!--  设计轮播图片控制器，向前播放"left carousel-control"控制，向后播放"right carousel-control"控制-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
</div>

轮播效果截图如下：

时光Timely

关注

9
点赞
踩
29

收藏

觉得还不错? 一键收藏
3
评论
简单轮播图实现原理详解

轮播图实现思路：第一步：设计轮播图片的容器；&lt;div id="myCarousel" class="carousel" data-ride="carousel"&gt;注意：data-ride="carousel"属性表示在页面加载时就开始动画播放。第二步：设计轮播图片计数器； &lt;ol class="carousel-indicators"&gt
复制链接

扫一扫

专栏目录