原生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 节点遍历函数
Mar 28 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
jQuery的one()方法用法实例
Jan 19 Javascript
JS动态加载当前时间的方法
Feb 09 Javascript
详解JavaScript ES6中的模板字符串
Jul 28 Javascript
JS实现3D图片旋转展示效果代码
Sep 22 Javascript
Highcharts学习之坐标轴
Aug 02 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
深入学习js瀑布流布局
Oct 14 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
vue.js根据代码运行环境选择baseurl的方法
Feb 28 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 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调用Oracle存储过程的方法
2008/09/12 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
PHP 验证登陆类分享
2015/03/13 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
JavaScript定时器和优化的取消定时器方法
2015/07/03 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
Bootstrap组件(一)之菜单
2016/05/11 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
2017/02/21 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
vue实现点击展开点击收起效果
2018/04/27 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
详解webpack-dev-middleware 源码解读
2020/03/23 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
python读取LMDB中图像的方法
2018/07/02 Python
对Python中list的倒序索引和切片实例讲解
2018/11/15 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python requests.post带head和body的实例
2019/01/02 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
Python实现使用dir获取类的方法列表
2019/12/24 Python
Python实现一个论文下载器的过程
2021/01/18 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
javascript实现用户必须勾选协议实例讲解
2021/03/24 Javascript
2014年自我评价
2014/01/04 职场文书
音乐教学反思
2014/02/02 职场文书
党风廉设责任书
2014/04/16 职场文书
医德考评自我评价
2014/09/14 职场文书
2015年加油站站长工作总结
2015/05/27 职场文书
2015年秋季小班开学寄语
2015/05/27 职场文书