四圖3d旋轉輪播
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3d旋轉輪播</title>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
*{margin: 0;padding: 0;}
#bac{width: 100%;height: 340px;background-color: lightgrey;position:relative;}
#picbox_all{margin:0 auto;width: 100%;height: 340px;position:relative;}
.picbox{position: absolute;border-radius: 5px;overflow: hidden;}
#picbox_1{width: 40%;height: 100%;left:30%;top:0;z-index: 99;box-shadow: 0 0 5px 5px gray;}
#picbox_3{width: 10%;height: 25%;left:45%;top:37%;}
#picbox_0{width: 20%;height: 50%;left:6%;top:25%;}
#picbox_2{width: 20%;height: 50%;left:74%;top:25%;}
.pic{width:100%;height: 100%;}
.left,.right{width:30px;height: 60px;position: absolute;top:calc(50% - 30px);}
.left:hover{width:40px;height: 80px;top:calc(50% - 40px);left:calc(2% - 5px);}
.right:hover{width:40px;height: 80px;top:calc(50% - 40px);left:calc(98% - 35px);}
.left{left:2%;}
.right{left:calc(98% - 30px);}
.divhover{box-shadow: 0 0 5px 5px gray!important;}
/*.clearfix:after{content:".";display:block;
height:0;
clear:both;
visibility:hidden;
}*/
</style>
<body>
<div id="bac">
<div id="picbox_all">
<img class="left" src="img/left.png"/>
<div class="picbox" id="picbox_0">
<img class="pic pic_0" src="img/1.jpg"/>
</div><div class="picbox" id="picbox_1">
<img class="pic pic_1" src="img/2.jpg"/>
</div><div class="picbox" id="picbox_2">
<img class="pic pic_2" src="img/3.jpg"/>
</div><div class="picbox" id="picbox_3">
<img class="pic pic_3" src="img/4.jpg"/>
</div>
<img class="right" src="img/right.png"/>
</div>
</div>
</body>
<script type="text/javascript">
var index = 1;
var index1;
var outside = 1;
var outsidewidth = $("#picbox_"+outside).css("width"); //獲取最前方寬度
$(window).resize(function(){
outsidewidth = $("#picbox_"+outside).css("width"); //獲取屏幕變化時寬度
});
var ul = document.getElementById("picbox_all");
var lis = ul.getElementsByClassName("picbox");
for (var i = 0; i < lis.length; i++) { //獲取點擊圖片的index
lis[i].index = i;
lis[i].onclick = function () {
index=this.index;
console.log(this.index);
};
}
function rotateleft(){ //滑動動畫效果
$("#picbox_"+index).animate({‘width‘: ‘40%‘,‘height‘: ‘100%‘,‘left‘:‘30%‘,‘top‘:‘0‘,
},1200).css({‘z-index‘: ‘99‘,‘box-shadow‘: ‘0 0 5px 5px gray‘})
index1=(index+3)%4;
$("#picbox_"+index1).animate({‘width‘: ‘20%‘,‘height‘: ‘50%‘,‘left‘:‘6%‘,‘top‘:‘25%‘,
},1200).css({‘z-index‘: ‘0‘,‘box-shadow‘: ‘0 0 0 0 gray‘})
index1=(index+2)%4;
$("#picbox_"+index1).animate({‘width‘: ‘10%‘,‘height‘: ‘25%‘,‘left‘:‘45%‘,‘top‘:‘37%‘,
},1200).css({‘z-index‘: ‘80‘,‘box-shadow‘: ‘0 0 0 0 gray‘})
index1=(index+1)%4;
$("#picbox_"+index1).animate({‘width‘: ‘20%‘,‘height‘: ‘50%‘,‘left‘:‘74%‘,‘top‘:‘25%‘,
},1200).css({‘z-index‘: ‘90‘,‘box-shadow‘: ‘0 0 0 0 gray‘})
outside=index;
}
function rotateright(){ //滑動動畫效果
$("#picbox_"+index).animate({‘width‘: ‘40%‘,‘height‘: ‘100%‘,‘left‘:‘30%‘,‘top‘:‘0‘,
},1200).css({‘z-index‘: ‘99‘,‘box-shadow‘: ‘0 0 5px 5px gray‘})
index1=(index+1)%4;
$("#picbox_"+index1).animate({‘width‘: ‘20%‘,‘height‘: ‘50%‘,‘left‘:‘74%‘,‘top‘:‘25%‘,
},1200).css({‘z-index‘: ‘0‘,‘box-shadow‘: ‘0 0 0 0 gray‘})
index1=(index+2)%4;
$("#picbox_"+index1).animate({‘width‘: ‘10%‘,‘height‘: ‘25%‘,‘left‘:‘45%‘,‘top‘:‘37%‘,
},1200).css({‘z-index‘: ‘80‘,‘box-shadow‘: ‘0 0 0 0 gray‘})
index1=(index+3)%4;
$("#picbox_"+index1).animate({‘width‘: ‘20%‘,‘height‘: ‘50%‘,‘left‘:‘6%‘,‘top‘:‘25%‘,
},1200).css({‘z-index‘: ‘90‘,‘box-shadow‘: ‘0 0 0 0 gray‘})
outside=index;
}
$(".picbox").on("click",function (){ //點擊圖片滑動
if ((outside+1)%4==index) {
rotateright();
} else if ((index+1)%4==outside) {
rotateleft();
}
})
$(".left").on("click",function (){ //點擊左箭頭滑動
if ( $("#picbox_"+outside).css("width") != outsidewidth){ //防連點
return false;
}
index = (index+3)%4;
rotateleft();
})
$(".right").on("click",function (){ //點擊右箭頭滑動
if ($("#picbox_"+outside).css("width") != outsidewidth ){ //防連點
return false;
}
index = (index+1)%4;
rotateright();
})
$(".picbox").mouseover(function(){ //模擬hover事件
//給當前的添加樣式
$(this).addClass("divhover");
})
//鼠標出
$(".picbox").mouseout(function(){
$(this).removeClass("divhover");
})
</script>
</html>
引入的外部文件或圖片有:
jq文件
四張素材圖片
左右箭頭圖片
功能：點擊圖片滑動，點擊箭頭滑動，運動過程中防連點功能
四圖3d旋轉輪播