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

最新推荐文章于 2024-06-27 19:48:27 发布

zhengxue_er

最新推荐文章于 2024-06-27 19:48:27 发布

阅读量1k

点赞数 1

分类专栏：前端文章标签：移动端焦点轮播图完整代码 bootstrap

本文链接：https://blog.csdn.net/qq_38177305/article/details/78190680

版权

本文介绍了一个适用于移动端的Bootstrap焦点轮播图2.0版本，解决了窗口适配问题，能在不同宽度的设备上自适应显示。实现时需要从Bootstrap中文网下载并引入相应的js和css文件，调整interval值可设置切换间隔时间。

摘要由CSDN通过智能技术生成

之前写的焦点轮播图只适用于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=&#