原生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 相关文章推荐
javascript 面向对象编程基础:继承
Aug 21 Javascript
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 Javascript
简单理解Vue中的nextTick方法
Jan 30 Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 Javascript
小程序新版订阅消息模板消息
Dec 31 Javascript
原生JS实现无缝轮播图片
Jun 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
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
文本加密解密
2006/06/23 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
网页广告中JS代码的信息监听示例
2014/04/02 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
JavaScript中的toUTCString()方法使用详解
2015/06/12 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
学习Javascript面向对象编程之封装
2016/02/23 Javascript
JS中改变this指向的方法(call和apply、bind)
2016/03/26 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
vue实现计算器功能
2020/02/22 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
Python中删除文件的程序代码
2011/03/13 Python
对python使用telnet实现弱密码登录的方法详解
2019/01/26 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
python脚本监控logstash进程并邮件告警实例
2020/04/28 Python
css3 响应式媒体查询的示例代码
2019/09/25 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
2014院党委领导班子及其成员群众路线对照检查材料思想汇报
2014/10/04 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
贷款收入证明范本
2015/06/12 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫
JAVA 线程池(池化技术)的实现原理
2022/04/28 Java/Android
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js