原生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 !!的作用
Dec 04 Javascript
重载toString实现JS HashMap分析
Mar 13 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
JS控制表单提交的方法
Jul 09 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
Gulp实现静态网页模块化的方法详解
Jan 09 Javascript
简单的三步vuex入门
May 20 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 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生成xml简单实例代码
2009/12/16 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
Three.js加载外部模型的教程详解
2017/11/10 Javascript
JS定义函数的几种常用方法小结
2019/05/23 Javascript
vue-cli配置全局sass、less变量的方法
2019/06/06 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
Python对文件操作知识汇总
2016/05/15 Python
python模仿网页版微信发送消息功能
2018/02/24 Python
PyTorch中Tensor的维度变换实现
2019/08/18 Python
python中如何使用虚拟环境
2020/10/14 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
css3 按钮样式简单可扩展创建
2013/03/18 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
美味咖啡的顶级烘焙师:Cafe Britt
2018/03/15 全球购物
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
一些Unix笔试题和面试题
2013/01/22 面试题
施工资料员岗位职责
2014/01/06 职场文书
硕士生工作推荐信
2014/03/07 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2014年保险公司工作总结
2014/11/22 职场文书
2014年学前班工作总结
2014/12/08 职场文书
2015年为民办实事工作总结
2015/05/26 职场文书
《风娃娃》教学反思
2016/02/18 职场文书