bootstrap实现轮播图

最新推荐文章于 2025-05-16 12:58:59 发布

原创最新推荐文章于 2025-05-16 12:58:59 发布 · 625 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用Bootstrap框架创建一个具有平滑过渡效果的轮播图组件，包括设置图片切换间隔时间、鼠标悬停暂停播放等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

                        
<!DOCTYPE html>

<html>

<head>

<meta charset=”utf-8”>

/*第一步，在顶部head标签里引入外部JQuery和Bootstrap库文件。下载好相关的库文件后，放在相应的文件夹里。我们将JS文件放在Body标签底部。注意要引入jQuery库，因为Bootstrap框架是以jQuery库文件为基础的。并且要放在的Bootstrap库文件上面，不然不会有效果。*/

<link rel=”stylesheet” href=”css/bootstrap.min.css”>

<script src=”jquery.min.js”></script>

<script src=”bootstrap.min.js”></script>

<script type=”text/javascript”>

 $(‘#slidershow’).carousel({

interval : 200,

pause : ‘hover’,

wrap : false,

});

</script>

</head>

<body>

/*第二步，添加轮播图片的容器。为了便于查看，在最外边添加一个“container”的div，再加一个子div，类名为carousel，并且给这个容器定义一个名为“slidershow”的ID，方便后面的data属性来声明触发。*/

<div class=”container”>

/*为 ID为“slidershow ”的div添加 “slide”类，作用是使图片与图片的切换具有平滑感。*/
<div id=”slidershow” class=”carousel slide” style=”width:900px”>

/*第三步，设计轮播图片的计数器。在容器内部添加计数器，加上一个名为“carousel-indicators”的类，用于显示图片的播放顺序。其中，data-target=”#slidershow” ，用于触发声明事件的目标。*/

<ol class=”carousel-indicators”>

<li data-target=”#mycarousel active” data-slide-to=”0”></li>

<li data-target=”#mycarousel” data-slide-to=”1”></li>

<li data-target=”#mycarousel” data-slide-to=”2”></li>

</ol>

/*第四步，设计轮播图片的播放区域。这个区域主要用来放轮播的图片。加一个名为“carousel-inner”的类，并放置在carousel容器中，再加一个名为“item”的容器来放置每张轮播图片。*/

<div class=”carousel-inner”>

/*为了让用户体验更加友好，在设计轮播图片的播放时，在第一张图片加一个“active”类，默认页面加载时显示第一张图片。*/

<div class=”item active”>

<img src=”img/slide1.png”>

</div>

<div class=”item”>

<img src=”img/slide2.png”>

</div>

<div class=”item”>

<img src=”img/slide3.png”>

</div>

</div>

/*第五步，设计轮播图片的前后图标控制器。我们平时看到的轮播图会有一个向前播放和向后播放的控制器。在Carousel中加一个控制向前和一个控制向右的a标签，并添加名为“carousel-control”的类，以及left和right类。其中left表示向前播放，right表示向后播放。*/

<a href=”#slidershow” data-slide=”prev”  class=”carousel-control-left”>&lsaquo;</a>

<a href=”#slidershow” data-slide=”next”  class=”carousel-control-right”>&rsaquo;</a>

</div>

</div>

</body>

</html>