原生js和css实现图片轮播效果
更新时间：2017年02月07日 15:40:55 作者：侠之大者为国为民
这篇文章主要为大家详细介绍了原生javascript和css实现图片轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了javascript图片轮播效果的具体代码，供大家参考，具体内容如下
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>图片轮播</title>
<style>
#box {
width:506px;
height:306px;
margin: 20px auto;
border:3px solid black;
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:bottom 3s; /* 设置图片移动消耗的时间*/
}
</style>
</head>
<body>
<div id="box">
<div id="pic1" class="pic red">1</div>
<div id="pic2" class="pic green">2</div>
<div id="pic3" class="pic blue">3</div>
<div id="pic3" class="pic orange">4</div>
</div>
<script>
window.addEventListener('load',function(){
var pics = document.getElementsByClassName('pic');
//为每个pic元素设置z-index的值
for(let i=0;i<pics.length;i++){
pics[i].style.zIndex = pics.length-i;
}
//循环播放图片的函数
var loopPics = (function(){
var index=0;
return function(pics,delay){
var recall = function(pic){
//给图片增加move类，调用css的transition属性播放移动动画
pic.className += ' move';
setTimeout(function(){
//取消图片的move类，图片返回原位
pic.className=pic.className.replace(' move','');
//改变图片组的堆叠顺序。最外的图片放到最下面，其他图片依次向外移动
for(let i=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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
js 动态插入脚本的是在页面加载时不存在，但将来的某一时刻通过修改该 DOM 动态添加的脚本。接下来通过本文给大家介绍JS动态插入脚本和插入引用外部链接脚本,需要的朋友可以参考下2018-05-05
假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1。下面通过实例代码给大家讲解swiper动态改变滑动内容的实现方法，感兴趣的朋友一起看看吧2018-01-01
这篇文章主要介绍了javascript实现的淘宝旅行通用日历组件,以实例形式分析了该日历组件的相关设置及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JavaScript实现的类字典插入或更新方法,实例分析了javascript针对类字典的插入与更新技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
JS Testing Properties 判断属性是否在对象里的方法
下面小编就为大家带来一篇JS Testing Properties 判断属性是否在对象里的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了微信小程序分包加载代码实现方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
本文主要介绍了JavaScript中如何判断对象是否为空的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解，感兴趣的朋友跟随脚本之家小编一起学习吧2017-09-09
这篇文章主要介绍了JavaScript常见鼠标事件与用法,结合实例形式较为详细的分析了javascript 8种常见的鼠标事件与相关使用技巧,需要的朋友可以参考下2019-01-01
elemetUi 组件--el-upload实现上传Excel文件的实例
这篇文章主要介绍了elemetUi 组件--el-upload实现上传Excel文件的实例的相关资料,希望通过本文大家能够实现这样的功能，需要的朋友可以参考下2017-10-10
最新评论