bootstrape，根据图片数量（通用）轮播_bootstrap多张图片轮播-优快云博客

本文介绍了一个使用Bootstrap构建的网页布局案例，重点实现了响应式轮播图效果，并通过jQuery添加了触摸滑动的功能，使得轮播图可以在触摸设备上流畅地进行前后切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap</title>
<link href="js/bootstrap-3.2.0-dist/css/bootstrap.css" rel="stylesheet">
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var a=document.documentElement.clientHeight;
$(".head").height(a*0.28);
$(".body").height(a*0.72);
$(".ul").height(a*0.2333);
$(".li").height(a*0.2333);

$(".item").css("min-height", a*0.28);
var def=document.getElementById("def_page").value;
var c = a*0.28;
// $(".carousel-indicators").append("<li data-target='#myCarousel' class='active'></li>");
// $(".carousel-inner").append("<div class='item active'></div>");
// $(".item").css("background-image","url(image/"+def+")");
// $(".item").css("background-size","100% "+c+"px");
var namestr=document.getElementById("page_name").value;
var name= new Array();
name=namestr.split("#");
if(namestr.length>0){
$(".carousel-indicators").append("<li data-target='#myCarousel' class='active'></li>");
for(i=0;i<name.length;i++){
$(".carousel-indicators").append("<li data-target='#myCarousel'></li>");
$(".carousel-inner").append("<div class='item' id="+i+"></div>");
$(".item").css("height", a*0.28);
$("#"+i+"").css("background-image","url(image/"+name[i]+")");
$("#"+i+"").css("background-size","100% "+c+"px");
}
}
$(".li").click(function(){
alert("1213");
});
$(".carousel").carousel({
interval: 1500
});
$("#myCarousel").carousel('cycle');
});

</script>
<script>
window.onload=function(){
var startX;
document.getElementById("listen").addEventListener('touchstart', function (e) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
}, false);
document.getElementById("listen").addEventListener('touchmove', function (e) {
var endX;
endX = e.touches[0].pageX;
endY = e.touches[0].pageY;
if(endX>startX){
$("#myCarousel").carousel('prev');
}else{
$("#myCarousel").carousel('next');
}
$("#myCarousel").carousel('cycle');
}, false);
}
</script>
<style>
.head{width:100%;}
.body{width:100%; margin-top:12px;}
.head img{max-width:100%;}
ul{ list-style:none;padding:0;margin:0;}
li{padding:0;margin:0;}
.ul{width:100%;background-size:cover; margin-top:2px;}
.ul li{width:49.8%;float:left; background-image:url(image/order.jpg); background-size:cover;}
.image1{background-image:url(image/1.jpg); background-size:cover;}
.li_left{ margin-left:1px;}
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide head">

<ol class="carousel-indicators">
</ol>

<div class="carousel-inner" id="listen">
<div class="item active image1"></div>
</div>
</div>
<div class="body">
<ul class="ul">
<li class="li li_left"></li>
<li class="li li_left"></li>
</ul>
<ul class="ul">
<li class="li li_left"></li>
<li class="li li_left"></li>
</ul>
<ul class="ul">
<li class="li li_left"></li>
<li class="li li_left"></li>
</ul>
</div>
<input type="hidden" id="def_page" value="1.jpg" />
<input type="hidden" id="page_name" value="5.jpg#6.jpg" />

</body>
</html>