<div id="carousel1" class="carousel slide">
    <div class="carousel-inner">
    <div class="item active">
    <img src="http://placehold.it/940x360/&text=Picture-1"/>
    <div  class="carousel-caption">
    <h1 style="color:#CCC">标题1</h1><!--文字显示在图片上面&半透明黑色-->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
    </div>
    </div>
   
   
       <div class="item"> 
    <img src="http://placehold.it/940x360/&text=Picture-2"/>
    <div class="carousel-caption">
    <h1 style="color:#CCC">标题2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation .</p>
    </div>
    </div>
    
    <div class="item"> 
    <img src="http://placehold.it/940x360/&text=Picture-3"/>
    <div class="carousel-caption">
    <h1 style="color:#CCC">标题3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, .</p>
    </div>
    </div>
    
    <div class="item"> 
    <img src="http://placehold.it/940x360/&text=Picture-4"/>
    <div class="carousel-caption">
    <h1 style="color:#CCC">标题4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud </p>
    </div>
    </div>
    </div>
    <a href="#carousel1" data-slide="prev" class="left carousel-control"><</a>
    <a href="#carousel1" data-slide="next" class="right carousel-control">></a>
    </div>

BootStrap2学习日记23---图片轮播

相关文章:

  • 2021-08-16
  • 2021-12-05
  • 2021-11-22
  • 2022-01-05
  • 2021-12-07
  • 2021-12-12
  • 2021-11-19
猜你喜欢
  • 2021-12-25
  • 2022-02-25
  • 2022-02-09
  • 2022-01-05
  • 2021-09-19
  • 2021-07-25
  • 2022-02-04
相关资源
相似解决方案