<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原生Bootstrap旋转木马特效 - 网页模板</title>
<link rel="stylesheet" href="http://libs.useso.com/js/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="htmleaf-container">
<div class="container">
<h2>Standard Rotation</h2>
<div id="full" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<ul class="row item active">
<li class="col-xs-4">
<img src="http://placehold.it/200/6dc066/ffffff&text=1" srcset="http://placehold.it/200/6dc066/ffffff&text=1 1x, http://placehold.it/400/6dc066/ffffff&text=1 2x" class="img-responsive">
</li>
<li class="col-xs-4">
<img src="http://placehold.it/200/6dc066/ffffff&text=2" srcset="http://placehold.it/200/6dc066/ffffff&text=2 1x, http://placehold.it/400/6dc066/ffffff&text=2 2x" class="img-responsive">
</li>
<li class="col-xs-4">
<img src="http://placehold.it/200/6dc066/ffffff&text=3" srcset="http://placehold.it/200/6dc066/ffffff&text=3 1x, http://placehold.it/400/6dc066/ffffff&text=3 2x" class="img-responsive">
</li>
</ul>
<ul class="row item">
<li class="col-xs-4">
<img src="http://placehold.it/200/6dc066/ffffff&text=4" srcset="http://placehold.it/200/6dc066/ffffff&text=4 1x, http://placehold.it/400/6dc066/ffffff&text=4 2x" class="img-responsive">
</li>
<li class="col-xs-4">
<img src="http://placehold.it/200/6dc066/ffffff&text=5" srcset="http://placehold.it/200/6dc066/ffffff&text=5 1x, http://placehold.it/400/6dc066/ffffff&text=5 2x" class="img-responsive">
</li>
<li class="col-xs-4">
<img src="http://placehold.it/200/6dc066/ffffff&text=6" srcset="http://placehold.it/200/6dc066/ffffff&text=6 1x, http://placehold.it/400/6dc066/ffffff&text=6 2x" class="img-responsive">
</li>
</ul>
</div>
<a class="carousel-control left" href="#full" data-slide="prev">Previous</a>
<a class="carousel-control right" href="#full" data-slide="next">Next</a>
</div>
<h2>Single Item Rotation</h2>
<div id="single" class="carousel slide" data-ride="carousel" data-shift="1">
<div class="carousel-inner">
<ul class="row item active">
<li class="col-xs-4 one">
<img src="http://placehold.it/200/666dc0/ffffff&text=1" srcset="http://placehold.it/200/666dc0/ffffff&text=1 1x, http://placehold.it/400/666dc0/ffffff&text=1 2x" class="img-responsive">
</li>
<li class="col-xs-4 two">
<img src="http://placehold.it/200/666dc0/ffffff&text=2" srcset="http://placehold.it/200/666dc0/ffffff&text=2 1x, http://placehold.it/400/666dc0/ffffff&text=2 2x" class="img-responsive">
</li>
<li class="col-xs-4 three">
<img src="http://placehold.it/200/666dc0/ffffff&text=3" srcset="http://placehold.it/200/666dc0/ffffff&text=3 1x, http://placehold.it/400/666dc0/ffffff&text=3 2x" class="img-responsive">
</li>
</ul>
<ul class="row item">
<li class="col-xs-4 four">
<img src="http://placehold.it/200/666dc0/ffffff&text=4" srcset="http://placehold.it/200/666dc0/ffffff&text=4 1x, http://placehold.it/400/666dc0/ffffff&text=4 2x" class="img-responsive">
</li>
<li class="col-xs-4 five">
<img src="http://placehold.it/200/666dc0/ffffff&text=5" srcset="http://placehold.it/200/666dc0/ffffff&text=5 1x, http://placehold.it/400/666dc0/ffffff&text=5 2x" class="img-responsive">
</li>
<li class="col-xs-4 six">
<img src="http://placehold.it/200/666dc0/ffffff&text=6" srcset="http://placehold.it/200/666dc0/ffffff&text=6 1x, http://placehold.it/400/666dc0/ffffff&text=6 2x" class="img-responsive">
</li>
</ul>
</div>
<a class="carousel-control left" href="#single" data-slide="prev">Previous</a>
<a class="carousel-control right" href="#single" data-slide="next">Next</a>
</div>
<p>The goal here was to change the way the carousel behaves without actually changing the way the markup is initially written.</p>
<div id="single-quad" class="carousel slide" data-ride="carousel" data-shift="1">
<div class="carousel-inner">
<ul class="row item active">
<li class="col-xs-3 one">
<img src="http://placehold.it/200/c0666d/ffffff&text=1" srcset="http://placehold.it/200/c0666d/ffffff&text=1 1x, http://placehold.it/400/c0666d/ffffff&text=1 2x" class="img-responsive">
</li>
<li class="col-xs-3 two">
<img src="http://placehold.it/200/c0666d/ffffff&text=2" srcset="http://placehold.it/200/c0666d/ffffff&text=2 1x, http://placehold.it/400/c0666d/ffffff&text=2 2x" class="img-responsive">
</li>
<li class="col-xs-3 three">
<img src="http://placehold.it/200/c0666d/ffffff&text=3" srcset="http://placehold.it/200/c0666d/ffffff&text=3 1x, http://placehold.it/400/c0666d/ffffff&text=3 2x" class="img-responsive">
</li>
<li class="col-xs-3 four">
<img src="http://placehold.it/200/c0666d/ffffff&text=4" srcset="http://placehold.it/200/c0666d/ffffff&text=4 1x, http://placehold.it/400/c0666d/ffffff&text=4 2x" class="img-responsive">
</li>
</ul>
<ul class="row item">
<li class="col-xs-3 five">
<img src="http://placehold.it/200/c0666d/ffffff&text=5" srcset="http://placehold.it/200/c0666d/ffffff&text=5 1x, http://placehold.it/400/c0666d/ffffff&text=5 2x" class="img-responsive">
</li>
<li class="col-xs-3 six">
<img src="http://placehold.it/200/c0666d/ffffff&text=6" srcset="http://placehold.it/200/c0666d/ffffff&text=6 1x, http://placehold.it/400/c0666d/ffffff&text=6 2x" class="img-responsive">
</li>
<li class="col-xs-3 seven">
<img src="http://placehold.it/200/c0666d/ffffff&text=7" srcset="http://placehold.it/200/c0666d/ffffff&text=7 1x, http://placehold.it/400/c0666d/ffffff&text=7 2x" class="img-responsive">
</li>
<li class="col-xs-3 eight">
<img src="http://placehold.it/200/c0666d/ffffff&text=8" srcset="http://placehold.it/200/c0666d/ffffff&text=8 1x, http://placehold.it/400/c0666d/ffffff&text=8 2x" class="img-responsive">
</li>
</ul>
</div>
<a class="carousel-control left" href="#single-quad" data-slide="prev">Previous</a>
<a class="carousel-control right" href="#single-quad" data-slide="next">Next</a>
</div>
</div>
</section>
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://libs.useso.com/js/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
原生Bootstrap旋转木马特效.zip
版权申诉
68 浏览量
2022-11-26
11:03:15
上传
评论
收藏 51KB ZIP 举报
原生Bootstrap旋转木马特效.zip （10个子文件） 
原生Bootstrap旋转木马特效 
原生Bootstrap旋转木马特效.jpg 31KB jiaoben3982 css 
htmleaf-demo.css 5KB style.css 2KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 7KB js index.js 2KB jquery-2.1.1.min.js 82KB资源评论
