利用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 相关文章推荐
JavaScript中使用ActiveXObject操作本地文件夹的方法
Mar 28 Javascript
jquery性能优化高级技巧
Aug 24 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
jQuery+HTML5实现弹出创意搜索框层
Dec 29 Javascript
vue深入解析之render function code详解
Jul 18 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
Node.js 中如何收集和解析命令行参数
Jan 08 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
PHP 中TP5 Request 请求对象的实例详解
2017/07/31 PHP
php集成开发环境详解
2019/09/24 PHP
跨浏览器的设置innerHTML方法
2006/09/18 Javascript
Extjs学习笔记之六 面版
2010/01/08 Javascript
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
javascript控制台详解
2015/06/25 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
jQuery中复合选择器简单用法示例
2018/03/31 jQuery
js DOM的事件常见操作实例详解
2019/12/16 Javascript
vue实现学生信息管理系统
2020/05/30 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
python字典get()方法用法分析
2015/04/17 Python
Python中List.index()方法的使用教程
2015/05/20 Python
python爬取拉勾网职位数据的方法
2018/01/24 Python
深入flask之异步非堵塞实现代码示例
2018/07/31 Python
python实现复制大量文件功能
2019/08/31 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
python实现梯度法 python最速下降法
2020/03/24 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
利用CSS3实现折角效果实例源码
2016/09/28 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
建筑工程专业学生的自我评价
2013/12/25 职场文书
学校消防演习方案
2014/02/19 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
公司搬迁通知
2015/04/20 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS