使用Bootstrap插件实现轮播效果（自动、手动）

最新推荐文章于 2023-10-22 20:57:58 发布

褪漆的钗

最新推荐文章于 2023-10-22 20:57:58 发布

阅读量3.5k

点赞数 2

分类专栏： HTML+CSS+Bootstrap 文章标签： css html5 bootstrap

本文链接：https://blog.csdn.net/m0_46274629/article/details/107489911

版权

Bootstrap实现简单的轮播效果

注：
1、本示例代码使用的是jQuery-3.5.1、Bootstrap-4.5.0、HTML5、CSS3
2、本示例仅实现了点击切换、自动轮播的效果

1、本地引入bootstrap的css和js文件

   <script src=".././wedapp/lib/jquery-3.5.1.js"></script>
   <link href="./css/bootstrap.css" rel="stylesheet"/>
   <script src="./js/bootstrap.js" ></script>

注：jQuery文件的引用应在bootstrap之前，否则会报错。

错误如下图所示
jQuery未在bootstrap之前引用

2、轮播

注：
效果图

HTML代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Bootstrap4</title>
    <script src=".././wedapp/lib/jquery-3.5.1.js"></script>
    <link href="./css/bootstrap.css" rel="stylesheet"/>
    <script src="./js/bootstrap.js" ></script>
</head>
<style>
    body {
   
        /*position: relative;*/
        background-color: peru;
    }
    div{
   
        border: #6c757d 1px solid;