新浦京娱乐场官网-301net-新浦京娱乐www.301net
做最好的网站

第一种效果

享受了三种Bootstrap图片轮播意义,相信总有一款你中意的!

首先种作用:**Bootstrap轻松轮播
**

<!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>

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

<!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>

其二种:JS调节自动轮播

<!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>

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

图片 1

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

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

Bootstrap 框架中的 carousel 插件还给使用者提供了两种奇特的调用方法,简单表达如下:

.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://www.xqwebs.com/uploads/allimg/190709/1641246309-1.jpg"></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 以外,轮播组件还帮忙其余八个自定义属性:

图片 2

正如代码达成“轮播不四处循环”和“轮播时间距离为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轮播模板使用情势详解

本文由新浦京娱乐场官网-301net-新浦京娱乐www.301net发布于301net网站建设,转载请注明出处:第一种效果

您可能还会对下面的文章感兴趣: