<!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{ 100%;height: 340px;background-color: lightgrey;position:relative;}
#picbox_all{margin:0 auto; 100%;height: 340px;position:relative;}
.picbox{position: absolute;border-radius: 5px;overflow: hidden;}
#picbox_1{ 40%;height: 100%;left:30%;top:0;z-index: 99;box-shadow: 0 0 5px 5px gray;}
#picbox_3{ 10%;height: 25%;left:45%;top:37%;}
#picbox_0{ 20%;height: 50%;left:6%;top:25%;}
#picbox_2{ 20%;height: 50%;left:74%;top:25%;}
.pic{100%;height: 100%;}
.left,.right{30px;height: 60px;position: absolute;top:calc(50% - 30px);}
.left:hover{40px;height: 80px;top:calc(50% - 40px);left:calc(2% - 5px);}
.right:hover{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;}
.picboxtitle{position:absolute;32%;height:15%;top:20%;left:7%;text-align: center;font-weight: bold;color: #444;}
.picboxcontent{position:absolute;30%;height:30%;top:63%;left:7%;color: #555;}
/*.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 class="picboxtitle">
汽车金融
</div>
<div class="picboxcontent">
汽车金融云端业务管理Saas系统
</div>
</div><div class="picbox" id="picbox_1">
<img class="pic pic_1" src="img/2.jpg"/>
<div class="picboxtitle">
汽车金融
</div>
<div class="picboxcontent">
汽车金融云端业务管理Saas系统
</div>
</div><div class="picbox" id="picbox_2">
<img class="pic pic_2" src="img/3.jpg"/>
<div class="picboxtitle">
汽车金融
</div>
<div class="picboxcontent">
汽车金融云端业务管理Saas系统
</div>
</div><div class="picbox" id="picbox_3">
<img class="pic pic_3" src="img/4.jpg"/>
<div class="picboxtitle">
汽车金融
</div>
<div class="picboxcontent">
汽车金融云端业务管理Saas系统
</div>
</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");
//获取点击图片的index
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function () {
index=this.index;
if ($("#picbox_"+index).css("width") == outsidewidth ){ //这里出现问题，若判定条件出现在循环外部则点击事件使得判定条件会混乱，可能导致的原因是
//同一个节点的不同点击事件可能会存在执行先后的问题
if (index == 0) {
console.log(900);
window.location.href = '#';
} else if (index == 1) {
console.log(100);
window.location.href = 'https://www.baidu.com/';
} else if (index == 2) {
console.log(200);
window.location.href = '#';
} else if (index == 3) {
console.log(300);
window.location.href = '#'; //只有当图片在最前方的时候点击才会跳转链接
}
}
}
}
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();
})
var automaticcarousel = setInterval(carousel, 4000); //自动轮播定时器
function carousel() {
index = (index+1)%4;
rotateright();
}
$(".picbox").mouseover(function(){ //模拟hover事件
//给当前的添加样式
$(this).addClass("divhover");
clearInterval(automaticcarousel); //鼠标进入阻止自动轮播
})
//鼠标出
$(".picbox").mouseout(function(){
$(this).removeClass("divhover");
automaticcarousel = setInterval(carousel, 4000); //鼠标出轮播重启
})
var titlefontsize = setInterval(function() {
var picboxtitle = document.getElementsByClassName("picboxtitle");
for (var i=0;i < picboxtitle.length; i++) {
picboxtitle[i].style.fontSize = picboxtitle[i].offsetWidth / 4 - 5 + "px"; //字体大小随图片大小而变化，定时器的动态查询功能
}
}, 10);
var contentfontsize = setInterval(function() {
var picboxcontent = document.getElementsByClassName("picboxcontent");
for (var i=0;i < picboxcontent.length; i++) {
picboxcontent[i].style.fontSize = picboxcontent[i].offsetWidth / 12 + "px";
}
}, 10);
</script>
</html>
引入的外部文件或图片有:
jq文件
四张素材图片
左右箭头图片
功能：点击图片滑动，点击箭头滑动，运动过程中防连点功能