<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="js/jquery.1.12.4.min.js"></script>
<title>Bootstrap</title>
</head>
<style type="text/css">
*{
font-family: 微软雅黑;
}
.container{
width: 1140px;
padding: 0px 15px;
margin: 0 auto;
}
.carousel{
height: 238px;
overflow: hidden;
position: relative;
}
.image_reel{
position: absolute;
left: 0px;
top: 0px;
}
.image_reel img{
float: left;
}
.paging{
position: absolute;
bottom: 20px;
right: 20px;
display: none;
}
.paging a{
text-decoration: none;
color: #fff;
padding: 0px 5px;
}
.paging a:hover{
background: #f40;
font-weight: bold;
}
.paging a.active{
background: #f40;
font-weight: bold;
}
</style>
<body>
<div class="container">
<h1 class="page-header">bootstrap</h1>
<div class="carousel">
<div class="window">
<div class="image_reel">
<a href="#"><img src="images/lunbo1.jpg" alt=""></a>
<a href="#"><img src="images/lunbo2.jpg" alt=""></a>
<a href="#"><img src="images/lunbo3.jpg" alt=""></a>
</div>
</div>
<div class="paging">
<a href="#" rel="1">1</a>
<a href="#" rel="2">2</a>
<a href="#" rel="3">3</a>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(".paging").show();
$(".paging a:first").addClass("active");
// // 获取图片的大小,来设置window 的width,让图片水平排列
var imageWidth = $(".window").width();//获取一个img的width
var imageSum = $(".image_reel img").size(); //获取img的数量
var imageReelWidth = imageWidth*imageSum; //得到总宽度
$(".image_reel").css({'width':imageReelWidth});//设置总管度
rotate=function(){
var triggerID=$active.attr("rel")-1;
var image_reelPosition= triggerID * imageWidth;
$('.paging a').removeClass('active');
$active.addClass('active');
$(".image_reel").animate({
left:-image_reelPosition
},500);
};
rotateSwitch=function(){
play= setInterval(function(){
$active= $('.paging a.active').next();
if($active.length===0){
$active= $('.paging a:first');
}
rotate();
},2000);
};
rotateSwitch();
$(".image_reel a").hover(function(){
clearInterval(play);
},function(){
rotateSwitch();
});
//on click
$(".paging a").click(function(){
$active= $(this);
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
</script>
</html>
bootstrap-js组件-自定义幻灯片
最新推荐文章于 2021-04-19 20:38:58 发布