利用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给input和textarea设定ie中的focus
May 29 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
Dec 13 Javascript
JavaScript实现反转字符串的方法详解
Apr 27 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
详解javascript中的babel到底是什么
Jun 21 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 Javascript
微信小程序引入VANT组件的方法步骤
Sep 19 Javascript
js实现幻灯片轮播图
Aug 14 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
cmd下运行php脚本
2008/11/25 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
使用Apache的rewrite
2021/03/09 Servers
javascript radio 联动效果
2009/03/04 Javascript
json 实例详细说明教程
2009/10/31 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
Script的加载方法小结
2011/01/12 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
Jquery api 速查表分享
2015/01/12 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
jscript读写二进制文件的方法
2015/04/22 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
vue使用Google地图的实现示例代码
2018/12/19 Javascript
vue.js实现的幻灯片功能示例
2019/01/18 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
pycharm编写spark程序,导入pyspark包的3中实现方法
2019/08/02 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
如何基于Python实现数字类型转换
2020/02/07 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
First Aid Beauty官网:FAB急救面霜
2018/05/24 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
大学生自我评价范文
2015/03/03 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
基于python的matplotlib制作双Y轴图
2021/04/20 Python