利用bootstrap写图片轮播

利用bootstrap写图片轮播

缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置

<div class="carousel slide col-md-offset-3" id="myCarousel">  <!--图片轮播的外框-->

<!--轮播底下的小圆点-->

    <ol class="carousel-indicators">

     <li data-target="#myCarousel" data-side-to="0" class="active"></li>

    <li data-target="#myCarousel" data-side-to="1"></li>

    <li data-target="#myCarousel" data-side-to="2"></li>             <!--data-target="#myCarousel"作用就是与图片整体联系起来-->

     </ol>

<!--轮播图片部分-->

      <div class="carousel-inner">

      <div class="item active">   <img src="..." alt="第一张"/>    </div>

       <div class="item">            <img src="..." alt="第二张"/>    </div>

       <div class="item">            <img src="..." alt="第三张"/>    </div>

       <div class="item">           <img src="..." alt="第四张"/>     </div>

     </div>

<!--    轮播中的左右按钮,利用class和data-slide来与图片联系起来    在这里也要再设置左右按钮的style   -->

     <a href="#myCarousel" class="carousel-control left"  data-slide="prev">

        <span style="...">&lsaquo;</span>

    </a>

     <a href="#myCarousel" class="carousel-control right" data-slide="next" >

      <span style="...">&rsaquo;</span>

        </a>

</div>

上一篇:android菜鸟学习笔记12----Android控件(一) 几个常用的简单控件


下一篇:Windows操作 - Photoshop为图片添加透明立体水印