富贵资源网 Design By www.hznty.com

前期准备:

1.jquery.js。

2.bootstrap的carousel.js。

3.bootstrap.css。

一起来看代码吧:

页面比较丑,希望大家不要介意哦嘻嘻

效果图:

利用BootStrap的Carousel.js实现轮播图动画效果

html+js:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>my love-首页</title>
 <link rel="stylesheet" href="css/bootstrap.css">
 <link rel="stylesheet" href="css/index.css">
 <link href="favicon.ico" rel="shortcut icon" />
 <script src="/UploadFiles/2021-04-02/jquery.js">

index.css

.container-fluid {
 padding-left: 200px;
}
.navbar-default {
 background-color: #308dca;
}
.navbar-brand {
 font-size: 34px;
 height: 70px;
}
.navbar-nav>li>a {
 font-size: 19px;
}
.navbar-default .navbar-brand, .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
 color: #fff;
}
.navbar-brand, .navbar-nav>li>a {
 line-height: 40px;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
 color: #fff;
 background-color: #2276bf;
}
.index-body {
 margin: 0 auto;
}
.carousel-inner {
 height: 490px;
}
.index-body, .images {
 width: 900px;
}
.index-footer {
 margin-top: 20px;
 color: #fff;
 background-color: #2276bf;
}
.footer-centent {
 width: 300px;
 font-size: 20px;
 line-height: 55px;
 margin: 0 auto;
 height: 60px;
}

大家在自己设计demo的时候注意下,class为index-body的div和img的宽度要设置一样,否则会出现以下情况:

利用BootStrap的Carousel.js实现轮播图动画效果

以上所述是小编给大家介绍的利用BootStrap的Carousel.js实现轮播图动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

富贵资源网 Design By www.hznty.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
富贵资源网 Design By www.hznty.com