脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap轮播

bootstrap实现每隔5秒自动轮播效果

 更新时间：2016年12月20日 16:29:38   投稿：lijiao  
这篇文章主要介绍了bootstrap实现每隔5秒自动轮播效果，可以自己设置轮播间隔时间，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了bootstrap轮播的具体代码，供大家参考，具体内容如下

<!DOCTYPE html> 
<html> 
 <head> 
 <title>轮播</title> 
 <link rel="stylesheet" href="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> 
 <style> 
 #circleContent{ 
 width:150px; 
 height:150px; 
 } 
 </style> 
 <script src="https://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script> 
 <script src="https://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 <script> 
 $(document).ready(function(){ 
 $('#circleContent').carousel({interval:5000});//每隔5秒自动轮播 
 }); 
 </script> 
 </head> 
 <body> 
 <div id="circleContent" class="carousel slide"> 
 <ol class="carousel-indicators"> 
 <li data-target="#circleContent" data-slide-to="0" class="active"></li> 
 <li data-target="#circleContent" data-slide-to="1"></li> 
 <li data-target="#circleContent" data-slide-to="2"></li> 
 </ol> 
 <div class="carousel-inner"> 
 <div class="item active"> 
  <img src="images/circle1.png"> 
  <div class="carousel-caption">IMG1</div> 
 </div> 
 <div class="item"> 
  <img src="images/circle2.png"> 
  <div class="carousel-caption">IMG2</div> 
 </div> 
 <div class="item"> 
  <img src="images/circle3.png"> 
  <div class="carousel-caption">IMG3</div> 
 </div> 
 </div> 
 <a class="carousel-control left" href="#circleContent" data-slide="prevent">‹</a> 
 <a class="carousel-control right" href="#circleContent" data-slide="next">›</a> 
 </div> 
 </body> 
</html>

如果大家还想深入学习，可以点击这里进行学习，再为大家附4个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js控制鼠标事件移动及移出效果显示

    js控制鼠标事件移动及移出效果显示

    鼠标事件的移动及移出效果都可以使用js来自定义，下面有个示例，实，效果为当事件发生改变时背景颜色也随着改变
    2014-10-10
  • javascript密码强度校验代码（两种方法）

    javascript密码强度校验代码（两种方法）

    为了保证网站个人信息的安全，很多网站在注册页面都设置密码强度这项，用javascript如何实现密码强度校验代码呢？下面小编给大家整理了两种方法使用javascript密码强度校验代码，有需要的朋友可以参考下
    2015-08-08
  • IE6-IE9使用JSON、table.innerHTML所引发的问题

    IE6-IE9使用JSON、table.innerHTML所引发的问题

    这篇文章主要介绍了IE6-IE9使用JSON、table.innerHTML所引发的问题 ,需要的朋友可以参考下
    2015-12-12
  • 按钮JS复制文本框和表格的代码

    按钮JS复制文本框和表格的代码

    有时候我们需要复制一个框的内容或者整个表格，一般的操作很可能造成一些不方便，一是操作步骤较为复制，一是复制表格的时候容易复制不完整或者格式出错。
    2011-04-04
  • javascript中检测变量的类型的代码

    javascript中检测变量的类型的代码

    javascript对于变量的定义、类型的要求都比较松散，这样既方便，但又容易犯错。有时候进行必要的类型检查是必须的。
    2010-12-12
  • echarts柱状图坐标轴内容显示不全的两种解决办法

    echarts柱状图坐标轴内容显示不全的两种解决办法

    本文主要介绍了echarts柱状图坐标轴内容显示不全的两种解决办法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • 微信小程序实现授权登录

    微信小程序实现授权登录

    这篇文章主要为大家详细介绍了微信小程序实现授权登录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-05-05
  • ie与ff下的event事件

    ie与ff下的event事件

    event是ie自带的一个对象，而ff中不存在该对象，只能通过传递参数的方式来模拟event，：（
    2009-09-09
  • javascript动态添加checkbox复选框的方法

    javascript动态添加checkbox复选框的方法

    这篇文章主要介绍了javascript动态添加checkbox复选框的方法的相关资料,需要的朋友可以参考下
    2015-12-12
  • webpack模块化的原理解析

    webpack模块化的原理解析

    webpack 中实现模块化的核心就是 __webpack_require__ 函数，无论是commonjs模块化还是es 模块都是通过该函数来导入的，这篇文章主要介绍了webpack模块化的原理,需要的朋友可以参考下
    2023-02-02

最新评论