原生js和css实现图片轮播效果
本文实例为大家分享了javascript图片轮播效果的具体代码，供大家参考，具体内容如下
<!DOCTYPEHTML>
<htmllang="zh-CN">
<head>
<metacharset="utf-8">
<title>图片轮播</title>
<style>
#box{
width:506px;
height:306px;
margin:20pxauto;
border:3pxsolidblack;
position:relative;
background-color:orange;
overflow:hidden;
/*overflow:hidden;*/
}
.pic{
position:absolute;
width:500px;
height:300px;
line-height:300px;
text-align:center;
font-size:100px;
color:white;
bottom:0;
}
.red{
background-color:red;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
.orange{
background-color:orange;
}
.move{
bottom:300px;
transition:bottom3s;/*设置图片移动消耗的时间*/
}
</style>
</head>
<body>
<divid="box">
<divid="pic1"class="picred">1</div>
<divid="pic2"class="picgreen">2</div>
<divid="pic3"class="picblue">3</div>
<divid="pic3"class="picorange">4</div>
</div>
<script>
window.addEventListener('load',function(){
varpics=document.getElementsByClassName('pic');
//为每个pic元素设置z-index的值
for(leti=0;i<pics.length;i++){
pics[i].style.zIndex=pics.length-i;
}
//循环播放图片的函数
varloopPics=(function(){
varindex=0;
returnfunction(pics,delay){
varrecall=function(pic){
//给图片增加move类，调用css的transition属性播放移动动画
pic.className+='move';
setTimeout(function(){
//取消图片的move类，图片返回原位
pic.className=pic.className.replace('move','');
//改变图片组的堆叠顺序。最外的图片放到最下面，其他图片依次向外移动
for(leti=0;i<pics.length;i++){
if(pics[i].style.zIndex==pics.length){
pics[i].style.zIndex=1;
}else{
pics[i].style.zIndex=pics[i].style.zIndex*1+1;
}
}
index++;
if(index==pics.length)index=0;
recall(pics[index]);
},delay);
};
recall(pics[index]);
};
})();
//调用函数，循环播放。delay的时间需要大于等于css动画里设置的图片移动时间
loopPics(pics,4000);
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。