原生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 相关文章推荐
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
Dec 30 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 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的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
浅析PHP echo 和 print 语句
2020/06/30 PHP
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
js iframe跨域访问(同主域/非同主域)分别深入介绍
2013/01/24 Javascript
JQUERY对单选框(radio)操作的小例子
2013/04/25 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
高效利用Angular中内置服务$http、$location等
2016/03/22 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
JavaScript 如何计算文本的行数的实现
2020/09/14 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
Python selenium文件上传方法汇总
2020/11/19 Python
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
python函数不定长参数使用方法解析
2019/12/14 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
Python编写单元测试代码实例
2020/09/10 Python
linux下进程间通信的方式
2014/12/23 面试题
大学生应聘自荐信
2013/10/11 职场文书
审核会计岗位职责
2013/11/08 职场文书
大学生学习党课思想汇报
2014/01/03 职场文书
高中军训感言800字
2014/03/05 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
学雷锋树新风演讲稿
2014/05/10 职场文书
小学生勤俭节约倡议书
2015/04/29 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
elementui的el-popover修改样式不生效的解决
2021/06/30 Javascript
java泛型通配符详解
2021/07/25 Java/Android
总结高并发下Nginx性能如何优化
2021/11/01 Servers
Redis基本数据类型哈希Hash常用操作命令
2022/06/01 Redis