四十六使用bootstrap制作轮播图(carousel)
Posted 上善若水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了四十六使用bootstrap制作轮播图(carousel)相关的知识，希望对你有一定的参考价值。
轮播图(carousel)
1、适用于PC端
- 参考链接：https://v3.bootcss.com/javascript/#carousel
- 最终效果
- 代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入bootstrap核心样式文件（必须） -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
</head>
<body>
<div id="s1" class="carousel slide" data-ride="carousel">
<!-- 指示器 -->
<ol class="carousel-indicators">
<li data-target="#s1" data-slide-to="0" class="active"></li>
<li data-target="#s1" data-slide-to="1"></li>
<li data-target="#s1" data-slide-to="2"></li>
</ol>
<!-- 中间滚动的内容 -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="imgs/slide_01_2000x410.jpg">
</div>
<div class="item">
<img src="imgs/slide_02_2000x410.jpg">
</div>
<div class="item">
<img src="imgs/slide_03_2000x410.jpg">
</div>
</div>
<!-- 左右控制 -->
<a class="left carousel-control" href="#s1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#s1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="lib/jquery/jquery.js"></script>
<!-- 引入bootstrap核心脚本文件 -->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/index.js"></script>
</body>
</html>
2、兼容PC端、移动端
- 项目结构
- 最终效果
PC端
移动端
- 代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入bootstrap核心样式文件（必须） -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--轮播图-->
<section id="dw_carousel" class="carousel slide" data-ride="carousel">
<!-- 指示器 -->
<ol class="carousel-indicators">
<li data-target="#dw_carousel" data-slide-to="0" class="active"></li>
<li data-target="#dw_carousel" data-slide-to="1"></li>
<li data-target="#dw_carousel" data-slide-to="2"></li>
</ol>
<!-- 中间滚动的内容 -->
<div class="carousel-inner" role="listbox">
<div class="item active" data-sm-img="imgs/slide_01_640x340.jpg" data-lg-img="imgs/slide_01_2000x410.jpg">
</div>
<div class="item" data-sm-img="imgs/slide_02_640x340.jpg" data-lg-img="imgs/slide_02_2000x410.jpg">
</div>
<div class="item" data-sm-img="imgs/slide_03_640x340.jpg" data-lg-img="imgs/slide_03_2000x410.jpg">
</div>
</div>
<!-- 左右控制 -->
<a class="left carousel-control" href="#dw_carousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#dw_carousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</section>
<!--/轮播图-->
<script src="lib/jquery/jquery.js"></script>
<!-- 引入bootstrap核心脚本文件 -->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/index.js"></script>
</body>
</html>
index.css
@font-face
font-family: lk;
src: url('../fonts/lk.eot') format('embedded-opentype'),
url('../fonts/lk.svg') format('svg'),
url('../fonts/lk.ttf') format('truetype'),
url('../fonts/lk.woff') format('woff');
[class^="icon-"],
[class*=" icon-"]
font-family: lk;
font-style: normal;
/* 焦点图的样式 start */
#dw_carousel .item
background: no-repeat center center;
-webkit-background-size: cover;
background-size: cover;
@media screen and ( min-width: 800px)
#dw_carousel .item
height: 410px;
/* 焦点图的样式 end */
index.js
$(function()
$(window).on("resize", function ()
// 1.1 获取窗口的宽度
let clientW = $(window).width();
// console.log(clientW);
// 1.2 设置临界值
let isShowBigImage = clientW >= 800;
// 1.3 获取所有的item
let $allItems = $("#dw_carousel .item");
// console.log($allItems);
// 1.4 遍历
$allItems.each(function (index, item)
// 1.4.1 取出图片的路径
let src = isShowBigImage ? $(item).data("lg-img") : $(item).data("sm-img");
let imgUrl = 'url("' + src +'")';
// 1.4.2 设置背景
$(item).css(
backgroundImage: imgUrl
);
// 1.4.3 设置img标签
if(!isShowBigImage)
let $img = "<img src='" + src + "'>";
$(item).empty().append($img);
else
$(item).empty();
);
);
$(window).trigger("resize");
);
以上是关于四十六使用bootstrap制作轮播图(carousel)的主要内容，如果未能解决你的问题，请参考以下文章