移动端焦点轮播图完整代码 bootstrap框架版本

来源：互联网发布：sql语句修改字段值编辑：程序博客网时间：2024/06/15 18:43

之前写的焦点轮播图只适用于PC端，在手机上会出现窗口不适配问题。由于涉及的固定宽高较多，所以百分比适配的方案就舍弃了。

现在上新一个2.0版本，可以让轮播图在移动端能根据屏幕大小有适当的显示。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />    <title></title>    <script type="text/javascript">        document.addEventListener('plusready', function(){            //console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"        });    </script>    <link rel = "stylesheet" href="css/bootstrap.css"/></head><body>    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">  <!-- Indicators -->  <ol class="carousel-indicators">    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>    <li data-target="#carousel-example-generic" data-slide-to="1"></li>    <li data-target="#carousel-example-generic" data-slide-to="2"></li>    <li data-target="#carousel-example-generic" data-slide-to="3"></li>    <li data-target="#carousel-example-generic" data-slide-to="4"></li>  </ol>  <!-- Wrapper for slides -->  <div class="carousel-inner" role="listbox">    <div class="item active">      <img src="img/1.jpg">      <div class="carousel-caption">      </div>    </div>    <div class="item">      <img src="img/2.jpg" >      <div class="carousel-caption">      </div>    </div>    <div class="item">      <img src="img/3.jpg" >      <div class="carousel-caption">      </div>    </div>    <div class="item">      <img src="img/4.jpg" >      <div class="carousel-caption">      </div>    </div>    <div class="item">      <img src="img/5.jpg" >      <div class="carousel-caption">      </div>    </div>  </div>  <!-- Controls -->  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">&lt;</span>    <span class="sr-only">previous</span>  </a>  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true" >&gt;</span>    <span class="sr-only">next</span>  </a></div>    <script src="js/jquery-1.11.1.js"></script>    <script type="text/javascript" src="js/bootstrap.js" ></script>    <script src="js/carousel.js"></script>    <script src="js/button.js"></script>    <script>        $('.carousel').carousel({        interval: 1500})    </script></body></html>

其中需要去bootstrap中文网去下载需要引入的js和css文件。需要引入的js文件有：
这里写图片描述

这里写图片描述

引入位置在body末尾。

引入的css文件：
这里写图片描述

这里写图片描述
引入位置在head末尾。

各种宽度的移动端都能自适应了：
这里写图片描述

这里写图片描述

 <script>        $('.carousel').carousel({        interval: 1500})    </script>

改变interval数值就可以改变切换的间隔时间（单位：ms）。

阅读全文

0 0

移动端焦点轮播图 完整代码 bootstrap框架版本

移动端焦点轮播图完整代码 bootstrap框架版本