bootstrape，根据图片数量（通用）轮播

最新推荐文章于 2020-12-08 02:15:00 发布

zhaossdut

最新推荐文章于 2020-12-08 02:15:00 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/zhaossdut/article/details/39077405

版权

<!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.οnlοad=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>

zhaossdut

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrape，根据图片数量（通用）轮播

Bootstrap $(document).ready(function(){var a=document.documentElement.clientHeight;$(".head").height(a*0.28);$(".body").height(a*0.72);$(".ul").height(a*0.2333); $("
复制链接

扫一扫