前期准备：

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="data:image/indexOne.jpg" alt="向日葵" class="images">

                    </div>

                    <div class="item">

                        <img src="data:image/indexTwo.jpg" alt="萌萌哒狗狗" class="images">

                    </div>

                    <div class="item">

                        <img src="data: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的宽度要设置一样，否则会出现以下情况：

利用bootstrap的carousel.js实现轮播图动画的更多相关文章

  1. js实现轮播图动画

    在网页浏览中,可以看到轮播图是无处不在的,这是一个前端工程最基本的技巧.首先看看几个网页的呈现的效果. QQ音乐: 网易云音乐: 天猫: 接下来将从简到难总结几种实现轮播图的方法. 1.样式一:鼠标滑 ...

  2. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  3. 第二百五十一节，Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  4. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  5. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  6. js编写轮播图，广告弹框

    1.轮播图 js编写轮播图,需要用到setInterval(计时器):先给一个div,里面放轮播图的图片,将轮播图的图片明明为相同样式的:如:banner1.jpg,banner2.jpg,banne ...

  7. js实现轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  9. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

随机推荐

  1. Angular2入门系列教程5-路由（一）-使用简单的路由并在在路由中传递参数

    上一篇:Angular2入门系列教程-服务 上一篇文章我们将Angular2的数据服务分离出来,学习了Angular2的依赖注入,这篇文章我们将要学习Angualr2的路由 为了编写样式方便,我们这篇 ...

  2. Http状态码之：301、302重定向

    概念 301 Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一.如果可能,拥有链接编辑功能的客户端应当自动把请求的地 ...

  3. JavaScript中Math对象的方法介绍

    1.比较最值方法 比较最值有两种方法,max() 和 min() 方法. 1.1 max() 方法,比较一组数值中的最大值,返回最大值. var maxnum = Math.max(12,6,43,5 ...

  4. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  5. Drawable实战解析：Android XML shape 标签使用详解（apk瘦身，减少内存好帮手）

    Android XML shape 标签使用详解   一个android开发者肯定懂得使用 xml 定义一个 Drawable,比如定义一个 rect 或者 circle 作为一个 View 的背景. ...

  6. .NET 基础 一步步 一幕幕[面向对象之对象和类]

    对象和类 本篇正式进入面向对象的知识点简述: 何为对象,佛曰:一花一世界,一木一浮生,一草一天堂,一叶一如来,一砂一极乐,一方一净土,一笑一尘缘,一念一清静.可见"万物皆对象". ...

  7. javascript函数

    array.sort(function(a, b){ return a -b ; } )   把数组 array 按照从小到大排序. [11, 22, 586, 10, -58, 86].sort(f ...

  8. 归并排序的java实现

    归并排序的优点不说了. 做归并排序之前,我先试着将两个有序数组进行排序,合并成一个有序数组. 思路:定义好两个有序数组,理解的时候我先思考了数组只有一个数组的排序,然后是两个元素的数组的排序,思路就有 ...

  9. Salesforce开发者学习笔记之一:基本知识

    本文介绍了Salesforce开发平台的基本知识, 包括如下内容: Salesforce平台介绍 Salesforce基本术语 定制和扩展Salesforce平台 创建一个简单的应用程序 Salesf ...

  10. Xamarin.Android之SQLiteOpenHelper

    一.前言 在手机中进行网络连接不仅是耗时也是耗电的,而耗电却是致命的.所以我们就需要数据库帮助我们存储离线数据,以便在用户未使用网络的情况下也可以能够使用应用的部分功能,而在需要网络连接的功能上采用提 ...