前期准备：
1.jquery.js。
2.bootstrap的carousel.js。
3.bootstrap.css。
一起来看代码吧：
页面比较丑，希望大家不要介意哦嘻嘻
效果图：
html+js：
my love-首页
$(function() {
$(".navbar-nav li").each(function(index) {
$(this).click(function() {
$("li.active").removeClass("active"); //注意这里
$(this).addClass("active"); //注意这里
$(".carousel-inner div.active").removeClass("active");
$(".carousel-inner div").eq(index).addClass("active");
});
});
window.setInterval(function() {
$(".carousel-inner div").each(function(index) {
if ($(this).hasClass("active")) {
$(".navbar-nav li.active").removeClass("active");
$(".navbar-nav li").eq(index).addClass("active");
}
});
}, 100);
});
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实现轮播图动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
2622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
