利用bootstrap的carousel.js实现轮播图动画

发布时间:2016-12-31 7:03:44编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"利用bootstrap的carousel.js实现轮播图动画 ",主要涉及到利用bootstrap的carousel.js实现轮播图动画 方面的内容,对于利用bootstrap的carousel.js实现轮播图动画 感兴趣的同学可以参考一下。

前期准备:

1.jquery.js。

2.bootstrap的carousel.js。

3.bootstrap.css。

     如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你。

一起来看代码吧:

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

效果图:

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="js/jquery.js" type="text/javascript"></script>    <script src="js/carousel.js" type="text/javascript"></script></head><body>    <div class="index-content">        <div class="index-header">            <nav class="navbar  navbar-default">                <div class="container-fluid">                    <div class="navbar-header">                        <a class="navbar-brand" href="javascript:void(0)">首页</a>                    </div>                    <div>                        <ul class="nav navbar-nav">                            <li class="active"><a href="#section1" class="con">向日葵花</a></li>                            <li><a href="#section2" class="con">萌萌哒的狗狗</a></li>                            <li><a href="#section3" class="con">好吃哒</a></li>                        </ul>                    </div>                </div>            </nav>        </div>        <div class="index-body">            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">                <!-- Indicators -->                <ol class="carousel-indicators">                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>                    <li data-target="#carousel-example-generic" data-slide-to="2"></li>                </ol>                <!-- Wrapper for slides -->                <div class="carousel-inner" role="listbox">                    <div class="item active">                        <img src="image/indexOne.jpg" alt="向日葵" class="images">                    </div>                    <div class="item">                        <img src="image/indexTwo.jpg" alt="萌萌哒狗狗" class="images">                    </div>                    <div class="item">                        <img src="image/indexThree.jpg" alt="好吃哒" class="images">                    </div>                </div>                <!-- Controls -->                <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>                    <span class="sr-only">Next</span>                </a>            </div>        </div>        <div class="index-footer">            <div class="footer-centent">                Copyright ©2016 爱喝酸奶的吃货            </div>        </div>    </div>    <script type="text/javascript">        $(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);        });    </script></body></html>

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的宽度要设置一样,否则会出现以下情况:


上一篇:CLion在Mac破解
下一篇:性能测试入门分析

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款