BootStrap 轮播 Carousel
参考 http://wrongwaycn.github.io/bootstrap/docs/javascript.html#collapse
同样 启动方式有2种 一种是在div的class中加 另一种是js启动
js可以提供更多控制 假如你只是需要例子中得效果 就用第一种data-attribute 的方式吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> <link href="../css/bootstrap.css" rel="stylesheet">
<style type="text/css">
</style> </head> <body>
<div id="myCarousel" class="carousel slide" style="width:600px;">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class=""></li>
<li data-target="#myCarousel" data-slide-to="1" class="active"></li>
<li data-target="#myCarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item active">
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
<script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.js" type="text/javascript"></script>
</body>
</html>
js方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" /> <link href="../css/bootstrap.css" rel="stylesheet">
<style type="text/css">
</style> </head> <body>
<div id="myCarousel" class="carousel slide" style="width:600px;">
<!-- Carousel items -->
<div class="carousel-inner"> <div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-01.jpg" alt="">
<div class="carousel-caption">
<h4>First Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item active">
<img src="assets/img/bootstrap-mdo-sfmoma-02.jpg" alt="">
<div class="carousel-caption">
<h4>Second Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h4>Third Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
<div class="item">
<img src="assets/img/bootstrap-mdo-sfmoma-03.jpg" alt="">
<div class="carousel-caption">
<h4>Fourth Thumbnail label</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</div> <!-- Carousel nav -->
<a id="PreBtn" class="carousel-control left" >‹</a>
<a id="NxtBtn" class="carousel-control right" >›</a>
</div> </div> <div class="div1 btn" value="0">1</div>
<div class="div2 btn" value="1">2</div>
<div class="div3 btn" value="2">3</div>
<div class="div4 btn" value="3">4</div> <script src="../js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.carousel').carousel({
interval: 5000
});
$('carousel').carousel('cycle');
$('#PreBtn').click(function(){
$('.carousel').carousel('prev');
});
$('#NxtBtn').click(function(){
$('.carousel').carousel('next');
});
$('.btn').click(function(){
var val=$(this).attr('value');
//alert(val);
$('.carousel').carousel(Number(val)); });
}); </script>
</body>
</html>
BootStrap 轮播 Carousel的更多相关文章
- Bootstrap 轮播(Carousel)插件
轮播插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是非常灵活的.可是图像,内嵌框架,视频或者其它您想的放置任何内容的类型. 下面是一个简单的幻灯片,使用轮播(carousel)插件显示 ...
- Bootstrap 轮播(Carousel)插件
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引 ...
- Bootstrap 轮播(Carousel)详解
Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容.如果您想要单独引用 ...
- Bootstrap历练实例:轮播(carousel)
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- Bootstrap 历练实例-轮播(carousel)插件的事件
事件 下表列出了轮播(Carousel)插件中要用到的事件.这些事件可在函数中当钩子使用. 事件 描述 实例 slide.bs.carousel 当调用 slide 实例方法时立即触发该事件. $(' ...
- Bootstrap 历练实例-轮播(carousel)插件方法
方法 下面是一些轮播(Carousel)插件中有用的方法: 方法 描述 实例 .carousel(options) 初始化轮播为可选的 options 对象,并开始循环项目. $('#identifi ...
- bootstrap轮播图--兼容IE7
<!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...
- bootstrap轮播组件之“如何关闭自动轮播”
在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...
- bootstrap轮播图 两侧半透明阴影
用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. ...
随机推荐
- ThreadPool.QueueUserWorkItem的性能问题
在WEB开发中,为了降低页面等待时间提高用户体验,我们往往会把一些浪费时间的操作放到新线程中在后台执行. 简单的实现代码就是: //代码一 new Thread(()=>{ //do somet ...
- Dictionary<string, string> 排序
.net framework 2.0 版 Dictionary<string, string> collection = new Dictionary<string, string& ...
- cocos2d-X-3.X 场景与层
1场景与层的相关函数 1. void runWithScene(Scene * scene). 该函数可以运行场景.只能在启动第一个场景时调用该函数.如果已经有一个场景运行,则不能调用该函数. 2. ...
- Struts学习之模型驱动
* 要从页面中获取表单元素的值,需要在动作类中声明与页面元素同名的属性.导致动作类中既有javabean又有业务方法. * 将javabean和业务方法进行分离: * 将重新创建一 ...
- 【Android】创建Popwindow弹出菜单的两种方式
方法一的Activity package com.app.test02; import android.app.Activity; import android.os.Bundle; import a ...
- hadoop搭建杂记:Linux下ssh免密码登陆
关于ssh免密码登陆的问题 关于ssh免密码登陆的问题 linux下可以用ssh-keygen来生成公钥/私钥对 ①生成id_rsa和id_rsa.pub公钥/私钥对,自动在~/.ssh下生成文件(亦 ...
- 对discuz的代码分析学习(二)首页文件
如果当前地址栏存在查询字符,并且是一个数字,条件成立. 查询字符:www.baidu.com/index.php?aaa=bbb aaa=bbb就是查询字符如果条件成立,则把 ...
- iOS 开发技巧
快速移除键盘 之前一直是讲view的父类改成control,然后加一个全屏按钮,点击让键盘消失.这个方法要写好多代码,现在一个比较好的方法是重写一个下面的方法: - (void)touchesBega ...
- 数组序列的capacity及size函数
#include<iostream>#include<vector>using namespace std;int main(){ vector<int> i ...
- SMTP邮件传输协议发送邮件和附件
在以前接触的项目中,一直都是在做网站时用到了发送mail 的功能,在asp 和.net 中都有相关的发送mail 的类, 实现起来非常简单.最近这段时间因工作需要在C++ 中使用发送mail 的功能, ...