利用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 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐expand.js
Dec 23 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
Bootstrap精简教程
Nov 27 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
解决Mac node版本升级失败的问题
May 16 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
vue实现文件上传读取及下载功能
Nov 17 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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
计数器详细设计
2006/10/09 PHP
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP扩展开发教程(总结)
2015/11/04 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
Python中replace方法实例分析
2014/08/20 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
scikit-learn线性回归,多元回归,多项式回归的实现
2019/08/29 Python
Django之form组件自动校验数据实现
2020/01/14 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
Python实现汇率转换操作
2020/05/03 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
CSS中越界问题的经典解决方案【推荐】
2016/04/19 HTML / CSS
css3中less实现文字长阴影(long shadow)
2020/04/24 HTML / CSS
html5 input属性使用示例
2013/06/28 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
2015/01/01 HTML / CSS
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
工作表现自我评价
2014/02/08 职场文书
工商管理本科生求职信
2014/07/13 职场文书
无故旷工检讨书
2015/08/15 职场文书
接收函
2019/04/22 职场文书