PHPOK 调用bootstrap 自适应轮播图的方法。

首页网页中要引入bootstrap 的文件

<link rel="stylesheet" type="text/css" href="images/bootstrap.min.css" />

<script src="images/jquery.1.9.1.min.js"></script>

//然后轮播放图部分

<style type="text/css">

/***轮播图***/

.carousel-control.right { background-image: none; }

.carousel-control.left { background-image: none; }

.bs-example .btnr{width:46px; height:100%; background:url(btnlr.png) no-repeat right center;}

.bs-example .btnl{width:46px; height:100%; background:url(btnlr.png) no-repeat left center;}

.carousel-indicators li{width:11px; height:11px; background:url(01.png) no-repeat left; margin:0 10px; border:0px; }

.carousel-indicators li.active{background:url(01.png) no-repeat right; margin:0 10px;width:11px; height:11px;}

</style>

<div class="bs-example">

  <div id="myCarousel" class="carousel slide" data-ride="carousel">

      <ol class="carousel-indicators">     

       <!-- run:$tags = phpok_c_list("shouyehuandengpian",99) -->

      <!-- $tags[rslist] AS $key=>$v -->

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

       <!-- end -->

     <!-- run:unset($tags) -->

   </ol>   

    <div class="carousel-inner" role="listbox">

     <!-- run:$tags = phpok_c_list("shouyehuandengpian",99) -->

      <!-- $tags[rslist] AS $key=>$v -->

      <div class="item"><img data-holder-rendered="true" src="{:$v[picture]}"> </div>

     <!-- end -->

     <!-- run:unset($tags) -->

    </div>

    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="prev">

    <span class="glyphicon btnr"></span> 

    </a> 

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="next"> 

    <span class="glyphicon btnl"></span> 

    </a> 

   </div>

</div>

<script type="text/javascript">

$(".carousel-indicators li:first").addClass("active");

$(".carousel-inner div:first").addClass("active");

<!-- run:$tags = phpok_c_list("shouyehuandengpian",99) -->

<!-- $tags[rslist] AS $key=>$v -->

$(".carousel-indicators li").each(function(index, element) {

    $(this).attr("data-slide-to",$(this).index());

});

<!-- end -->

<!-- run:unset($tags) -->

</script>