淘先锋技术网

首页 1 2 3 4 5 6 7

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

之前写的焦点轮播图只适用于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" target="_blank" rel="external nofollow" />
</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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  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）。