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

BootStrap实现轮播图效果(收藏)

 更新时间：2016年12月30日 16:50:55   作者：cullinans  
这篇文章主要介绍了BootStrap实现轮播图效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下

今天学习bootstrap，发现轮播图的实现很强大，于是记录下来，方便自己以后使用。

1：相关知识总结 

carousel slide：整个轮播图的最外边一层的样式
   data-ride：用于标记轮播在页面加载时就开始动画播放
   data-interval：自动循环每个项目之间延迟的时间量。如果为 false，轮播将不会自动循环
   data-wrap：轮播是否连续循环
 carousel-indicators：轮播图的小圆点
   data-target：
   data-slide-to：向轮播传递一个原始滑动索引
 carousel-inner：图片容器层的样式
    data-slide： 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置

   2：demo

<body>
 <div class="container">
  <div class="row">
   <div class="carousel slide" id="slide" data-ride="carousel" data-interval="2000" data-wrap="true">
    <!--轮播图的小圆点-->
    <ol class="carousel-indicators">
     <li data-target="#slide" data-slide-to="0" class="active"></li>
     <li data-target="#slide" data-slide-to="1"></li>
    </ol>
    <!--整个轮播图的div-->
    <div class="carousel-inner">
      <div class="item active">
       <img src="./image/p1.jpg" alt="">
       <div class="carousel-caption">
        <h3>商城</h3>
        <p>第一张图片</p>
       </div>
      </div>
      <div class="item">
       <img src="./image/p2.jpg" alt="">
       <div class="carousel-caption">
        <h3>商城</h3>
        <p>第二张图片</p>
       </div>
      </div>
    </div>
    <a class="carousel-control left" data-target="#slide" data-slide="prev">
     <span class="glyphicon glyphicon-chevron-left"></span>
     <span class="sr-only">&lsaquo;</span>
    </a>
    <a class="carousel-control right" data-target="#slide" data-slide="next">
     <span class="glyphicon glyphicon-chevron-right"></span>
     <span class="sr-only">&rsaquo;</span>
    </a>
   </div>
  </div>
 </div>
</body>

以上所述是小编给大家介绍的BootStrap实现轮播图效果(收藏)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 跟我学习javascript的this关键字

    跟我学习javascript的this关键字

    跟我学习javascript的this关键字，this是动态绑定，或称为运行期绑定的，这就导致 JavaScript中的this关键字有能力具备多重含义，带来灵活性的同时，也为初学者带来不少困惑
    2015-11-11
  • JavaScript获取系统自带的颜色选择器功能（图）

    JavaScript获取系统自带的颜色选择器功能（图）

    JavaScript获取系统自带的颜色选择器功能,这个是针对IE浏览器，所以大家如果想用兼容性更好的代码，可以查看脚本之家的相关文章。
    2010-08-08
  •  javascript数组中的slice方法和join​​方法

     javascript数组中的slice方法和join​​方法

    这篇文章主要介绍了 javascript数组中的slice方法和join​​方法，文章内容介绍详细，具有一的参考价值，需要的小伙伴可以参考一下，希望对你的学习有所帮助
    2022-03-03
  • JS使用setInterval计时器实现挑战10秒

    JS使用setInterval计时器实现挑战10秒

    这篇文章主要为大家详细介绍了JS使用setInterval计时器实现挑战10秒，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-11-11
  • JavaScript实现统计文本框Textarea字数增强用户体验

    JavaScript实现统计文本框Textarea字数增强用户体验

    现在流行的Twitter等微博客网站，有一个很好的用户体验，就是在文本框中输入文字的时候，会自动统计输入的字符，并显示用户还能输入的字符，在限制了140个字的微博客中，这样的小提示可以很好的增强用户体验,本文也尝试着实现一下
    2012-12-12
  • JavaScript 实现页面滚动动画

    JavaScript 实现页面滚动动画

    这篇文章主要介绍了JavaScript 实现页面滚动动画的方法，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下
    2021-04-04
  • js实现分割上传大文件

    js实现分割上传大文件

    这篇文章主要为大家详细介绍了js实现分割上传大文件的相关资料,需要的朋友可以参考下
    2016-03-03
  • 微信小程序实现简单吸顶效果

    微信小程序实现简单吸顶效果

    这篇文章主要为大家详细介绍了微信小程序实现简单吸顶效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-01-01
  • JS实现网页每隔3秒弹出一次对话框的方法

    JS实现网页每隔3秒弹出一次对话框的方法

    这篇文章主要介绍了JS实现网页每隔3秒弹出一次对话框的方法,涉及JavaScript结合时间函数递归调用的相关技巧,非常简单,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • html文本框提示效果的示例代码

    html文本框提示效果的示例代码

    在html文本框中显示提示效果，以方便用户的输入，比如在输入姓名时，会自动提示 姓名长度最多16个字符，是不是很酷哦。快来看看吧
    2014-06-06

最新评论