简单轮播图实现原理详解

快来打我* 2022-05-17 11:15 223阅读 0赞

轮播图实现思路：

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

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

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

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

<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">
    	  <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 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>
    
    <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>

轮播效果截图如下：

![70][]

![70 1][]

[70]: /images/20220517/a7b09457103b418fbf7be7abe8b2ad6f.png
[70 1]: /images/20220517/97fe3f07ef9e4516aafcb0b27eacce16.png