原生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 相关文章推荐
JS创建优美的页面滑动块效果 - Glider.js
Sep 27 Javascript
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
May 27 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
CSS3 动画卡顿性能优化的完美解决方案
Sep 20 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 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的博客ping服务代码
2012/02/04 PHP
YII框架中使用memcache的方法详解
2017/08/02 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
Laravel5.1 框架控制器基础用法实例分析
2020/01/04 PHP
由prototype_1.3.1进入javascript殿堂-类的初探
2006/11/06 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
jquery取消选择select下拉框示例代码
2014/02/22 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
[01:32]完美世界DOTA2联赛10月29日精彩集锦
2020/10/30 DOTA
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
Python操作CouchDB数据库简单示例
2015/03/10 Python
Python合并多个装饰器小技巧
2015/04/28 Python
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
台湾网购生鲜第一品牌:i3Fresh爱上新鲜
2017/10/26 全球购物
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
shell变量的作用空间是什么
2013/08/17 面试题
护士自我评价
2014/02/01 职场文书
国窖1573广告词
2014/03/21 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
2016教师节感恩话语
2015/12/09 职场文书
Oracle笔记
2021/04/05 Oracle
javascript Number 与 Math对象的介绍
2021/11/17 Javascript
PostgreSQL逻辑复制解密原理解析
2022/09/23 PostgreSQL