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

本文实例讲解了Bootstrap实现图片轮播的详细代码,分享给大家供大家参考,具体内容如下

分享了三种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> 

具体代码:

第一种效果:**Bootstrap简单轮播
**

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 <style type="text/css">
 img{
 margin:0 auto;
 }
 </style>
</head>
<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="images/lunbo1.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 <div class="item">
 <img src="images/lunbo2.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 <div class="item">
 <img src="images/lunbo3.jpg" height="266" width="800" alt="...">
 <div class="carousel-caption">
 ...
 </div>
 </div>
 ...
 </div>

 <!-- Controls -->
 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

 Previous
 </a>
 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

 Next
 </a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title>
 <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="/jquery/2.0.0/jquery.min.js"></script>
 <script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
 <!-- 轮播(Carousel)指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播(Carousel)项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
 </div>
 </div>
 <!-- 轮播(Carousel)导航 -->
 <a class="carousel-control left" href="#myCarousel" 
 data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" 
 data-slide="next">›</a>
</div> 

</body>
</html>

Bootstrap学习教程

效果

第二种:**带标题轮播(手动)**

Bootstrap实战教程

图片 1

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 轮播(Carousel)插件的标题</title>
 <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="/jquery/2.0.0/jquery.min.js"></script>
 <script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
 <!-- 轮播(Carousel)指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播(Carousel)项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
 <div class="carousel-caption">标题 1</div>
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
 <div class="carousel-caption">标题 2</div>
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
 <div class="carousel-caption">标题 3</div>
 </div>
 </div>
 <!-- 轮播(Carousel)导航 -->
 <a class="carousel-control left" href="#myCarousel" 
 data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" 
 data-slide="next">›</a>
</div> 


</body>
</html>

Bootstrap Table使用教程

可选参数

第三种:JS控制自动轮播

Bootstrap插件使用教程

  • data-ride=”carousel”:加上可以自动播放,不加点击后才会播放。
  • 添加标题
<!DOCTYPE html>
<html>
<head>
 <title>BootstrapJS控制轮播</title>
 <link href="/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="/jquery/2.0.0/jquery.min.js"></script>
 <script src="/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide">
 <!-- 轮播(Carousel)指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" 
 class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播(Carousel)项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
 </div>
 </div>
 <!-- 轮播(Carousel)导航 -->
 <a class="carousel-control left" href="#myCarousel" 
 data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" 
 data-slide="next">›</a>
 <!-- 控制按钮 -->
 <div style="text-align:center;">
 <input type="button" class="btn start-slide" value="Start">
 <input type="button" class="btn pause-slide" value="Pause">
 <input type="button" class="btn prev-slide" value="Previous Slide">
 <input type="button" class="btn next-slide" value="Next Slide">
 <input type="button" class="btn slide-one" value="Slide 1">
 <input type="button" class="btn slide-two" value="Slide 2"> 
 <input type="button" class="btn slide-three" value="Slide 3">
 </div>
</div> 
<script>
 $(function(){
 // 初始化轮播
 $(".start-slide").click(function(){
 $("#myCarousel").carousel('cycle');
 });
 // 停止轮播
 $(".pause-slide").click(function(){
 $("#myCarousel").carousel('pause');
 });
 // 循环轮播到上一个项目
 $(".prev-slide").click(function(){
 $("#myCarousel").carousel('prev');
 });
 // 循环轮播到下一个项目
 $(".next-slide").click(function(){
 $("#myCarousel").carousel('next');
 });
 // 循环轮播到某个特定的帧 
 $(".slide-one").click(function(){
 $("#myCarousel").carousel(0);
 });
 $(".slide-two").click(function(){
 $("#myCarousel").carousel(1);
 });
 $(".slide-three").click(function(){
 $("#myCarousel").carousel(2);
 });
 });
</script>


</body>
</html>

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

标题写在 <div class=”carousel-caption”></div>之间
例如:

在 carousel() 方法中可以设置具体的参数,如:

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

<div class="carousel-caption">
 <h3>果壳推书正式上线</h3>
 <p>好书分享、经验交流</p>
</div>

图片 2

您可能感兴趣的文章:

  • 全面解析Bootstrap图片轮播效果
  • 全面解析Bootstrap中Carousel轮播的使用方法
  • 轻松实现Bootstrap图片轮播
  • BootStrap
    轮播插件(carousel)支持左右手势滑动的方法(三种)
  • Bootstrap的图片轮播示例代码
  • Bootstrap轮播加上css3动画,炫酷到底!
  • 全面解析多种Bootstrap图片轮播效果
  • Bootstrap图片轮播组件Carousel使用方法详解
  • Bootstrap每天必学之轮播(Carousel)插件
  • bootstrap轮播模板使用方法详解

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

使用时,在初始化插件的时候可以传关相关的参数,如:

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

$("#slidershow").carousel({
 interval: 3000
});

以上就是针对javascript图片轮播进行的详细介绍,希望本文对大家学习javascript程序设计有所帮助。

Bootstrap 框架中的 carousel
插件还给使用者提供了几种特殊的调用方法,简单说明如下:

您可能感兴趣的文章:

  • 全面解析Bootstrap图片轮播效果
  • 全面解析Bootstrap中Carousel轮播的使用方法
  • bootstrap实现每隔5秒自动轮播效果
  • BootStrap
    轮播插件(carousel)支持左右手势滑动的方法(三种)
  • Bootstrap的图片轮播示例代码
  • Bootstrap轮播加上css3动画,炫酷到底!
  • 全面解析多种Bootstrap图片轮播效果
  • Bootstrap图片轮播组件Carousel使用方法详解
  • Bootstrap每天必学之轮播(Carousel)插件
  • bootstrap轮播模板使用方法详解

.carousel(“cycle”):从左向右循环播放;
.carousel(“pause”):停止循环播放;
.carousel(“number”):循环到指定的帧,下标从0开始,类似数组;
.carousel(“prev”):返回到上一帧;
.carousel(“next”):下一帧

用data属性控制轮播:

<!DOCTYPE html>
<html>
<head>
 <title>Bootstrap 实例 - 轮播(Carousel)插件方法</title>
 <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div id="myCarousel" class="carousel slide" data-wrap="true" data-interval="1000">
 <!-- 轮播(Carousel)指标 -->
 <ol class="carousel-indicators">
 <li data-target="#myCarousel" data-slide-to="0" 
 class="active"></li>
 <li data-target="#myCarousel" data-slide-to="1"></li>
 <li data-target="#myCarousel" data-slide-to="2"></li>
 </ol> 
 <!-- 轮播(Carousel)项目 -->
 <div class="carousel-inner">
 <div class="item active">
 <img src="/wp-content/uploads/2014/07/slide1.png" alt="First slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide2.png" alt="Second slide">
 </div>
 <div class="item">
 <img src="/wp-content/uploads/2014/07/slide3.png" alt="Third slide">
 </div>
 </div>
 <!-- 轮播(Carousel)导航 -->
 <a class="carousel-control left" href="#myCarousel" 
 data-slide="prev">‹</a>
 <a class="carousel-control right" href="#myCarousel" 
 data-slide="next">›</a>
 <!-- 控制按钮 -->
 <div style="text-align:center;">
 <input type="button" class="btn start-slide" value="Start">
 <input type="button" class="btn pause-slide" value="Pause">
 <input type="button" class="btn prev-slide" value="Previous Slide">
 <input type="button" class="btn next-slide" value="Next Slide">
 <input type="button" class="btn slide-one" value="Slide 1">
 <input type="button" class="btn slide-two" value="Slide 2"> 
 <input type="button" class="btn slide-three" value="Slide 3">
 </div>
</div> 



</body>
</html>

声明式方法是通过定义 data 属性来实现,data
属性可以很容易地控制轮播的位置。其主要包括以下几种:

1 . data-ride 属性:取值
carousel,并且将其定义在 carousel 上。

2 . data-target 属性:取值
carousel 定义的 ID
名或者其他样式识别符,如前面示例所示,取值为“#slidershow”,并且将其定义在轮播图计数器的每个
li 上。

3 . data-slide 属性:取值包括
prev,next,prev表示向后滚动,next
表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上,同时设置控制器
href 值为容器 4 . carousel 的 ID 名或其他样式识别符。

5 . data-slide-to
属性:
用来传递某个帧的下标,比如
data-slide-to=”2″,可以直接跳转到这个指定的帧(下标从0开始计),同样定义在轮播图计数器的每个
li 上。

在这里需要注意可以为 #slidershow 层添加 slide 
样式,使用图片与图片切换效果有平滑感。

<div id="slidershow" class="carousel slide" data-ride="carousel">
 ...
</div>

除了data-ride=”carousel”、data-slide、data-slide-to
以外,轮播组件还支持其他三个自定义属性:

图片 3

如下代码实现“轮播不持续循环”和“轮播时间间隔为1秒”。

<div id="slidershow" class="carousel" data-ride="carousel" data-wrap="false" data-interval="1000">
 ......
</div>

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

以上就是针对javascript图片轮播进行的详细介绍,希望本文对大家学习javascript程序设计有所帮助。

您可能感兴趣的文章:

  • 全面解析Bootstrap图片轮播效果
  • 全面解析Bootstrap中Carousel轮播的使用方法
  • bootstrap实现每隔5秒自动轮播效果
  • 轻松实现Bootstrap图片轮播
  • BootStrap
    轮播插件(carousel)支持左右手势滑动的方法(三种)
  • Bootstrap的图片轮播示例代码
  • Bootstrap轮播加上css3动画,炫酷到底!
  • Bootstrap图片轮播组件Carousel使用方法详解
  • Bootstrap每天必学之轮播(Carousel)插件
  • bootstrap轮播模板使用方法详解

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注