<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Visor Carousel|兼容Bootstrap3的jQuery旋转木马插件</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Visor styles -->
<link href="css/jquery.visor-carousel.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/default.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<style type="text/css">
.visor-carousel,
.visor-carousel .visor-wrapper,
.visor-carousel .carousel-inner > .item,
.visor-carousel .carousel-inner > .item > img {
height: 250px;
}
.visor-carousel .carousel-inner > .item > img {
position: absolute;
width: 100%;
}
</style>
</head>
<body>
<header class="htmleaf-header">
<h1>Visor Carousel|兼容Bootstrap3的jQuery旋转木马插件 <span>A Bootstrap 3 & Font Awesome 4 compatible, modern, HTML5 + CSS3 + jQuery carousel</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
<div class="htmleaf-demo center">
<a href="index.html">兼容性比较</a>
<a href="index2.html">事件处理</a>
<a href="index3.html" class="current">演示</a>
</div>
</header>
<h1>Visor Carousel presentation</h1>
<!-- Copied from original: http://getbootstrap.com/examples/carousel/ -->
<h2>Visor Carousel - col-md-2 items</h2>
<div id="myVisor1" class="visor-carousel slide" data-ride="visor">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myVisor1" data-slide-to="0" class="active"></li>
<li data-target="#myVisor1" data-slide-to="1"></li>
<li data-target="#myVisor1" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item col-md-2 active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container-fluid">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item col-md-2">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container-fluid">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item col-md-2">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container-fluid">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control layout-landscape" href="#myVisor1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="left carousel-control layout-portrait" href="#myVisor1" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control layout-landscape" href="#myVisor1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<a class="right carousel-control layout-portrait" href="#myVisor1" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.visor -->
<h2>Visor Carousel - col-md-3 items</h2>
<div id="myVisor2" class="visor-carousel slide" data-ride="visor">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myVisor2" data-slide-to="0" class="active"></li>
<li data-target="#myVisor2" data-slide-to="1"></li>
<li data-target="#myVisor2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item col-md-3 active">
<img class="first-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="First slide">
<div class="container-fluid">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>Note: If you're viewing this page via a <code>file://</code> URL, the "next" and "previous" Glyphicon buttons on the left and right might not load/display properly due to web browser security rules.</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item col-md-3">
<img class="second-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Second slide">
<div class="container-fluid">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
<div class="item col-md-3">
<img class="third-slide" src="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" alt="Third slide">
<div class="container-fluid">
<div class="carousel-caption">
<h1>One more for good measure.</h1>
<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>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control layout-landscape" href="#myVisor2" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a c
没有合适的资源?快使用搜索试试~ 我知道了~
jQuery兼容Bootstrap3旋转木马插件Visor Carousel.zip
共16个文件
css:4个
html:3个
js:3个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 170 浏览量
2022-11-06
23:57:49
上传
评论
收藏 104KB ZIP 举报
温馨提示
jQuery兼容Bootstrap3旋转木马插件Visor Carousel.zip
资源推荐
资源详情
资源评论
收起资源包目录
jQuery兼容Bootstrap3旋转木马插件Visor Carousel.zip (16个子文件)
132677979037841020
jQuery_VisorCarousel
css
jquery.visor-carousel.css 14KB
carousel.css 3KB
default.css 5KB
related
2.jpg 26KB
1.jpg 26KB
fonts
icomoon.woff 1KB
icomoon.svg 2KB
icomoon.eot 2KB
icomoon.ttf 1KB
index.html 9KB
js
jquery-1.11.0.min.js 94KB
jquery.visor-carousel.js 14KB
index2.html 7KB
dist
jquery.visor-carousel.min.js 9KB
jquery.visor-carousel.min.css 11KB
index3.html 15KB
共 16 条
- 1
资源评论
毕业_设计
- 粉丝: 1925
- 资源: 1万+
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功