3D图片轮播

来源：互联网发布：网页注入js代码编辑：程序博客网时间：2024/04/30 05:11

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
margin: 0px;
padding: 0px;
text-align: center;
}
#banner{
margin: 0px auto;
width: 1030px;
height: 250px;
position: relative;
}
#banner div img{
width: 100%;
height: 100%;
}
#banner .img_bottom1{
left: 0px;
top: 50px;
width: 340px;
height: 150px;
z-index: 8;
position: absolute;
}
#banner .img_bottom2{
left: 630px;
top: 50px;
width: 340px;
height: 150px;
z-index: 8;
position: absolute;
}
#banner .img_left{
left: 0px;
top: 25px;
width: 400px;
height: 200px;
z-index: 9;
position: absolute;
}
#banner .img_center{
left: 265px;
top: 0px;
width: 500px;
height: 250px;
z-index: 10;
position: absolute;
}
#banner .img_right{
left: 630px;
top: 25px;
width: 400px;
height: 200px;
z-index: 9;
position: absolute;
}
.btn_left{
text-align: center;
position: absolute;
left: 0px;
top: 0px;
width: 265px;
height: 250px;
cursor:pointer;
background: #ccc;
z-index: 11;
opacity: 0.01;
}
.btn_right{
text-align: center;
position: absolute;
right: 0px;
top: 0px;
width: 265px;
height: 250px;
cursor:pointer;
background: #ccc;
z-index: 11;
opacity: 0.01;
}
.left{
left: 100px;
top: 100px;
width: 50px;
height: 50px;
z-index: 12;
opacity: 0.8;
color: white;
cursor:pointer;
display: none;
font-size: 40px;
background: black;
line-height: 50px;
position: absolute;
text-align: center;
border-radius: 70px;
}
.right{
right: 100px;
top: 100px;
width: 50px;
height: 50px;
z-index: 12;
opacity: 0.8;
color: white;
cursor:pointer;
display: none;
font-size: 40px;
background: black;
line-height: 50px;
position: absolute;
text-align: center;
border-radius: 70px;
}
</style>
<body>
<div id="banner">
<div class="img_bottom1"><img src="img/0839ca14860678e674b276aa3285c0c1.jpg"></div>
<div class="img_left"><img src="img/46d8066aea36c63d076530c90219de00.jpg"></div>
<div class="img_center"><img src="img/4c272f3b4468a15c33e009a199544a40.jpg"></div>
<div class="img_right"><img src="img/609ec336cfde00906d97e555d7edf810.jpg"></div>
<div class="img_bottom2"><img src="img/a23ddf780361fd5303ff44656a32b319.jpg"></div>
<span class="btn_left"></span>
<span class="btn_right"></span>
<span class="bt left"><</span>
<span class="bt right">></span>
</div>
</body>
<script src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function(){

// 左右轮播点击事件
var $d=$("#banner>div");
var mask=false;
$('.btn_left').click(function(){
if(!mask){
mask=true;
move(false);
}
})
$('.btn_right').click(function(){
if(!mask){
mask=true;
move(true);
}
})
// 通过数组来包装轮播div的width、height、left、top、z-index
function move(direction){
var arrw=[],arrh=[],arrt=[],arrl=[],arri=[];
for(var i=0;i<$d.length;i++){
arrw[i]=$d.eq(i).css('width');
arrh[i]=$d.eq(i).css('height');
arrt[i]=$d.eq(i).css('top');
arrl[i]=$d.eq(i).css('left');
arri[i]=$d.eq(i).css('z-index');
}
for(var i=0;i<$d.length;i++){
var n;
// 通过判断点击的方向来改变轮播的方向
if(direction){
//往左循环轮播
n=i-1;
if(n<0){n=$d.length-1}
}else{
//往右循环轮播
n=i+1;
if(n>$d.length-1){n=0}
}
// 通过取出数组值来动画赋给上个或者下个div的方式实现3D轮播效果
$d.eq(i).css('z-index',arri[n]).animate({
"width":arrw[n],
"height":arrh[n],
"top":arrt[n],
"left":arrl[n],
// 通过判断动画是否完成来达到调试bug的目的
},600,function(){mask=false});
}

}

})
</script>
</html>

0 0