<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
/>
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
<title></title>
<style>
#slide {
user-select: none;
}
#slide .item {
background: url(../img/bg.jpg) 0 0 / 100% 100% no-repeat;
height: 300px;
}
#slide h3 {
transition: all 1s ease-in;
transform: translateX(-100vw);
}
#slide p {
transition: all 1s ease-in;
transform: translateX(100vw);
}
#slide .slideIn {
transform: translateX(0);
}
</style>
</head>
<body>
<div class="carousel slide" id="slide">
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption">
<h3>轮播的标题1</h3>
<p>文字描述</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>轮播的标题2</h3>
<p>文字描述</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>轮播的标题3</h3>
<p>文字描述</p>
</div>
</div>
<div class="item">
<div class="carousel-caption">
<h3>轮播的标题4</h3>
<p>文字描述</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#slide" data-slide-to="0" class="active"></li>
<li data-target="#slide" data-slide-to="1"></li>
<li data-target="#slide" data-slide-to="2"></li>
<li data-target="#slide" data-slide-to="3"></li>
</ol>
<a href="#slide" class="carousel-control left" data-slide="prev">
<i class="glyphicon glyphicon-chevron-left"></i>
</a>
<a href="#slide" class="carousel-control right" data-slide="next">
<i class="glyphicon glyphicon-chevron-right"></i>
</a>
</div>
<div class="btn-group">
<button class="btn btn-default" id="autoplay">播放</button>
<button class="btn btn-default" id="pause">暂停</button>
<button class="btn btn-default" id="prev">暂停</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
$(function() {
$("#autoplay").click(function(e) {
$("#slide").carousel({
interval: 1000,
pause: "", //hover
keyboard: true //键盘
});
});
$("#pause").click(function(e) {
$("#slide").carousel("pause");
});
$("#prev").click(function(e) {
$("#slide").carousel("prev");
});
/*
slide.bs.carousel 刚要切换
slid.bs.carousel 切换完成
*/
$("#slide")
.on("slid.bs.carousel", function() {
var index = $("#slide .item.active").index();
$("#slide .item")
.eq(index)
.find("*")
.addClass("slideIn")
})
.on("slide.bs.carousel", function() {
$("#slide .item")
.find("*")
.removeClass("slideIn")
})
// 鼠标滑动切换效果
.on("mousedown", function(e) {
x1 = e.pageX;
})
.on("mouseup", function(e) {
x2 = e.pageX;
if (x2 - x1 > 80) {
$("#slide").carousel('next');
}
if (x2 - x1 < -80) {
$("#slide").carousel('prev');
}
});
//等比例缩放 = 1024 * 768 = winWidth / divHeight
function setItemheight() {
var winWidth = $(window).width();
var divHeight = (winWidth / 1024) * 768;
$("#slide .item").height(divHeight);
}
setItemheight();
$(window).on('resize',function(){
debounce(setItemheight);
});
//防抖
var time;
function debounce(cb){
clearTimeout(time);
time = setTimeout(function(){
cb();
},500)
}
});
</script>
</body>
</html>
自己可以添加更多有趣的效果欧。