原生js和css实现图片轮播效果


Posted in Javascript onFebruary 07, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
Oct 11 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
jquery选择器使用详解
Apr 08 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
基于layui实现高级搜索(筛选)功能
Jul 26 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 Javascript
Javascript Dom元素获取和添加详解
Sep 24 Javascript
bootstrap输入框组使用方法
Feb 07 #Javascript
angularjs使用directive实现分页组件的示例
Feb 07 #Javascript
Bootstrap下拉菜单样式
Feb 07 #Javascript
基于JavaScript实现购物车功能
Feb 07 #Javascript
js实现类bootstrap模态框动画
Feb 07 #Javascript
canvas实现探照灯效果
Feb 07 #Javascript
javascript数据类型详解
Feb 07 #Javascript
You might like
PHP错误提示的关闭方法详解
2013/06/23 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
Javascript insertAfter() 实现函数代码
2011/10/12 Javascript
Node.js文件操作详解
2014/08/16 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
对node通过fs模块判断文件是否是文件夹的实例讲解
2019/06/10 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
Vue3为什么这么快
2020/09/23 Javascript
[01:03:38]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS CIS
2014/05/22 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
详解Python中的各种函数的使用
2015/05/24 Python
Windows下Python使用Pandas模块操作Excel文件的教程
2016/05/31 Python
python 输出上个月的月末日期实例
2018/04/11 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
应届毕业生个人求职信范文
2014/01/29 职场文书
民事辩护词范文
2015/05/21 职场文书
休假证明书
2015/06/24 职场文书
您对思维方式了解多少?
2019/12/09 职场文书