原生js和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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于vue.js实现图片轮播效果
轮播图效果: 1.html <template> <div class="shuffling"> <div class="fouce fl"> <div class="focus"> <ul class="showimg"> <template v-for='sd in shufflingData'> <li v-if='shufflingId==$
-
js图片自动轮播代码分享(js图片轮播)
1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left = .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:
-
原生JS实现图片轮播效果
之前页面需要图片轮播的时候,都是直接在网上找一个插件,然后自己动手改一下,把图片的路径改成自己图片的路径,然后万事大吉.后来觉得这样并不能提高自己的前端水平,于是乎,自己动手写了一个图片轮播的小demo,用的是jquery,小弟前端小白一个,各位前端大神看了之后,望批评指正. 我的思路是这样的,定义两个变量,一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小,如果$index大于$exdex,说明是朝左翻页,反之,就是朝右翻页.如果是
-
原生javascript实现图片轮播效果代码
看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失 复制代码 代码如下: function id(name) {return document.getElementByI
-
JS实现简易图片轮播效果的方法
本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char
-
原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div
-
js图片轮播手动切换特效
先瞄一眼js图片轮播手动切换特效图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> * {padding:0px;margin:0px;} #content {width:400px;height:400px
-
带左右箭头图片轮播的JS代码
轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19
-
很棒的一组js图片轮播特效
大家经常在网页中使用轮播效果,本文为大家分享的是一组图片轮播特效,希望大家喜欢 先看一眼效果图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} #content{width:550px;height:300px;margin:50
-
js 图片轮播(5张图片)
演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199