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


Posted in Javascript onDecember 21, 2016

前期准备:

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

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

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

Javascript 相关文章推荐
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
JS远程获取网页源代码实例
Sep 05 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
用javascript替换URL中的参数值示例代码
Jan 27 Javascript
Javascript对象Clone实例分析
Jun 09 Javascript
Angularjs实现下拉框联动的示例代码
Aug 22 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
javaScript字符串工具类StringUtils详解
Dec 08 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
vue cli3.0 引入eslint 结合vscode使用
May 27 Javascript
jQuery延迟执行的实现方法
Dec 21 #Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 #Javascript
如何实现星星评价(jquery.raty.js插件)
Dec 21 #Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 #Javascript
js编写三级联动简单案例
Dec 21 #Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 #Javascript
js返回顶部实例分享
Dec 21 #Javascript
You might like
把PHP安装为Apache DSO
2006/10/09 PHP
php实现utf-8和GB2312编码相互转换函数代码
2013/02/07 PHP
WAMP环境中扩展oracle函数库(oci)
2015/06/26 PHP
深入浅析用PHP实现MVC
2016/03/02 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
jQuery中text() val()和html()的区别实例详解
2016/06/28 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
2017/11/11 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
利用python为运维人员写一个监控脚本
2018/03/25 Python
windows下添加Python环境变量的方法汇总
2018/05/14 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
对python中的高效迭代器函数详解
2018/10/18 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
python爬虫要用到的库总结
2020/07/28 Python
一款基于css3的动画按钮代码教程
2014/11/23 HTML / CSS
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
会计学应届毕业生推荐信
2013/11/04 职场文书
部队万能检讨书
2014/02/20 职场文书
上课说话检讨书500字
2014/11/01 职场文书
超市员工辞职信范文
2015/05/12 职场文书