Bootstrap轮播插件简单使用方法介绍

 更新时间:2016年06月21日 14:51:07   作者:-夏昊-  
这篇文章主要为大家详细介绍了Bootstrap轮播插件简单使用方法,介绍了使用bootstrap轮播插件的作用,感兴趣的小伙伴们可以参考一下

本文细致的为大家分享了Bootstrap轮播插件简单实例,供大家参考,具体内容如下

使用Bootstrap的轮播插件可以向站点添加滑块,内容可以是图像,内嵌框架,视频或其它任何内容,使用轮播插件需要引入

效果图:

bootstrap.min.js. 

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
 
  <!—轮播导航 -->
  <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>
  <!—轮播项目 -->
  <div class="carousel-inner" role="listbox">
  <div class="item active">
   <img src="~/images/Chrysanthemum.jpg" />
   <div class="carousel-caption"> 
   ffffffff
   </div> 
  </div>
   <div class="item">
   <img src="~/images/Desert.jpg" />
 
   <div class="carousel-caption">
 
   xxxxxxxxxxxxxxxx
   </div> 
  </div>
   <div class="item">
   <img src="~/images/Lighthouse.jpg" /> 
   <div class="carousel-caption"> 
   mmmmmmmmmmmm 
   </div>
  </div>
  </div>
 
  <!—轮播导航 -->
 
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
 
  <span class="glyphicon glyphicon-chevron-left"></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"></span>
   <span class="sr-only">Next</span>
 
  </a> 
 </div>


小编再为大家推荐一篇文章:全面解析Bootstrap图片轮播效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

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

相关文章

  • 深入探究V8引擎的底层原理

    深入探究V8引擎的底层原理

    V8引擎是一款由Google开发的JavaScript引擎,V8引擎采用了众多的优化措施,使得其在性能上得到了极大的提升,能够高效地执行JavaScript代码,本文将和大家一起探讨一下V8引擎底层原理,探究其优异性能之谜
    2023-06-06
  • JavaScript中setInterval()用法举例详解

    JavaScript中setInterval()用法举例详解

    这篇文章主要给大家介绍了关于JavaScript中setInterval()用法的相关资料,setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-10-10
  • JavaScript实现Excel表格效果

    JavaScript实现Excel表格效果

    这篇文章主要为大家详细介绍了JavaScript实现Excel表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • js实现图片粘贴上传到服务器并展示的实例

    js实现图片粘贴上传到服务器并展示的实例

    下面小编就为大家带来一篇js实现图片粘贴上传到服务器并展示的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题

    JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题

    这篇文章主要介绍了JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题的相关资料,需要的朋友可以参考下
    2015-12-12
  • layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)

    layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)

    今天小编就为大家分享一篇layui动态渲染生成左侧3级菜单的方法(根据后台返回数据),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总

    浅析JS刷新框架中的其他页面 && JS刷新窗口方法汇总

    本篇文章是对JS刷新框架中的其他页面以及JS刷新窗口的方法进行了汇总介绍,需要的朋友可以参考下
    2013-07-07
  • js中编码函数:escape,encodeURI与encodeURIComponent详解

    js中编码函数:escape,encodeURI与encodeURIComponent详解

    escape(), encodeURI()和encodeURIComponent()是在Javascript中用于编码字符串的三个常用的方法,而他们之间的异同却困扰了很多的Javascript初学者,这篇文章详细的给大家介绍了js中编码函数:escape,encodeURI与encodeURIComponent的相关资料,需要的朋友可以参考下。
    2017-03-03
  • js中eval方法详解之eval方法的初级应用

    js中eval方法详解之eval方法的初级应用

    js中eval()函数可计算某个字符串,下面这篇文章主要给大家介绍了关于js中eval方法详解之eval方法的初级应用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-01-01
  • JavaScript随机生成颜色的方法

    JavaScript随机生成颜色的方法

    这篇文章主要介绍了JavaScript随机生成颜色的方法的相关资料,非常不错,代码简单易懂,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10

最新评论