运用CSS3transition及opacity属性 制作图片轮播动画

自己这两天根据用js来控制触发CSS3中transition属性，从而写出来的以CSS3动画为基础，js控制过程的图片轮播

运用css3的opacity透明度属性和transition动画过度属性，用js对过程加以控制，也实现了js对CSS3中transition动画的触发

实例链接地址：http://pspgbhu.github.io/opacity

今天突然发现这个代码有问题，主要出在html/css上，问题主要是由于使用了position：absolute定位，同时banner这个div中又没有其他元素，因此这个div就无法被正确的撑开，为我们的页面布局带来了困扰。
再其次的问题是，这个轮播图主要意图是用于页面顶部的巨大的横幅广告，但是在写代码时并没有考虑到面对不同分辨率情况下的展现效果，因此还有许多改良的空间。

想了想还是不把之前有问题的代码删掉了，正确代码在最后面

这是之前有问题的代码:

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>图片自动切换 图片轮播</title>
  7.         <style type="text/css">
  8.             /*注意 第一张图片z-index值是5，后面的图片值为1*/
  9.             *{margin: 0;padding: 0;}
  10.             .banner {
  11.                 width: 1920px;
  12.                 height: 493px;
  13.                 position: relative;
  14.             }
  16.             .banner_slide_1 {
  17.                 position: absolute;
  18.                 top: 0;
  19.                 left: 0;
  20.                 display: block;
  21.                 transition: opacity 0.5s;
  22.                 opacity: 1;
  23.                 z-index: 5;
  24.             }
  26.             .banner_slide_2 {
  27.                 position: absolute;
  28.                 top: 0;
  29.                 left: 0;
  30.                 display: none;
  31.                 transition: opacity 0.5s;
  32.                 opacity: 0;
  33.                 z-index: 1;
  34.             }
  36.             .banner_slide_3 {
  37.                 position: absolute;
  38.                 top: 0;
  39.                 left: 0;
  40.                 display: none;
  41.                 transition: opacity 0.5s;
  42.                 opacity: 0;
  43.                 z-index: 1;
  44.             }
  45.         </style>
  46.         <script type="text/javascript">
  47.             window.onload=function bannerSlide() {
  48.                 var i = 0;
  49.                 var banner = new Array//将图片创建为一个数组
  50.                 banner[0] = document.getElementById("banner1");
  51.                 banner[1] = document.getElementById("banner2");
  52.                 banner[2] = document.getElementById("banner3");
  53.                 sli = setInterval(slide, 5000); //轮播间隔时间
  54.                 function slide() {
  55.                     if (i == banner.length - 1) {
  56.                         banner[0].style.display = "block";
  57.                         banner[0].style.opacity = "1";
  58.                         banner[i].style.opacity = "0";
  59.                         setTimeout(function() {
  60.                             banner[i].style.display = "none";
  61.                             banner[i].style.zIndex = "1";
  62.                             banner[0].style.zIndex = "5";
  63.                             i = 0;
  64.                         }, 500)
  65.                     } else {
  66.                         banner[i + 1].style.display = "block";
  67.                         banner[i + 1].style.opacity = "1";
  68.                         banner[i].style.opacity = "0";
  69.                         setTimeout(function() {
  70.                             banner[i + 1].style.zIndex = "5";
  71.                             banner[i].style.display = "none";
  72.                             banner[i].style.zIndex = "1";
  73.                             i++;
  74.                         }, 500)
  75.                     }
  76.                 }
  77.             }
  78.         </script>
  79.     </head>
  81.     <body>
  83.         <div class="banner">
  84.             <div class="banner_slide_1" id="banner1"><img src="img/banner.jpg" alt="" /></div>
  85.             <div class="banner_slide_2" id="banner2"><img src="img/banner02_02.jpg" /></div>
  86.             <div class="banner_slide_3" id="banner3"> <img src="img/banner3.jpg" /></div>
  87.         </div>
  89.     </body>
  91. </html>

以下为改良后的代码：

  1. <!DOCTYPE html>
  2. <html>
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title></title>
  7.         <style type="text/css">
  8.             *{padding: 0;margin: 0;
  9.             }
  10.             .banner {
  11.                 width: 100%;
  12.                 min-width: 1200px;
  13.                 height: 488px;
  14.                 overflow: hidden;
  15.             }
  17.             .banner_index {
  18.                 position: relative;
  19.             }
  21.             .banner_slide_1 {
  22.                 position: absolute;
  23.                 top: 0;
  24.                 left: 0;
  25.                 right: 0;
  26.                 bottom: 0;
  27.                 display: block;
  28.                 transition: opacity 0.5s;
  29.                 opacity: 1;
  30.                 z-index: 5;
  31.                 background: url(img/banner.jpg) no-repeat;
  32.                 background-position: center 0;
  33.             }
  35.             .banner_slide_2 {
  36.                 position: absolute;
  37.                 top: 0;
  38.                 left: 0;
  39.                 right: 0;
  40.                 bottom: 0;
  41.                 display: none;
  42.                 transition: opacity 0.5s;
  43.                 opacity: 0;
  44.                 z-index: 1;
  45.                 background: url(img/banner02_02.jpg) no-repeat;
  46.                 background-position: center 0;
  47.             }
  49.             .banner_slide_3 {
  50.                 position: absolute;
  51.                 top: 0;
  52.                 left: 0;
  53.                 right: 0;
  54.                 bottom: 0;
  55.                 display: none;
  56.                 transition: opacity 0.5s;
  57.                 opacity: 0;
  58.                 z-index: 1;
  59.                 background: url(img/banner3.jpg) no-repeat;
  60.                 background-position: center 0;
  61.             }
  62.         </style>
  63.         <script type="text/javascript">
  64.             window.onload=function bannerSlide() {
  65.                 if (!document.getElementById) return false;
  66.                 if (!document.getElementsByTagName) return false;
  67.                 if (!document.getElementById("bannerBox")) return false;
  68.                 var i = 0;
  69.                 var box = document.getElementById("bannerBox");
  70.                 var banner = box.getElementsByTagName("div");
  71.                 sli = setInterval(slide, 4000); //轮播间隔时间
  72.                 function slide() {
  73.                     if (i == banner.length - 1) {
  74.                         banner[0].style.display = "block";
  75.                         banner[0].style.opacity = "1";
  76.                         banner[i].style.opacity = "0";
  77.                         setTimeout(function() {
  78.                                 banner[i].style.display = "none";
  79.                                 banner[i].style.zIndex = "1";
  80.                                 banner[0].style.zIndex = "5";
  81.                                 i = 0;
  82.                             }, 500) //动画过渡时间，搭配CSS使用
  83.                     } else {
  84.                         banner[i + 1].style.display = "block";
  85.                         banner[i + 1].style.opacity = "1";
  86.                         banner[i].style.opacity = "0";
  87.                         setTimeout(function() {
  88.                             banner[i + 1].style.zIndex = "5";
  89.                             banner[i].style.display = "none";
  90.                             banner[i].style.zIndex = "1";
  91.                             i++;
  92.                         }, 500)
  93.                     }
  94.                 }
  95.             }
  96.         </script>
  98.     </head>
  100.     <body>
  102.         <div id="bannerBox" class="banner banner_index">
  103.             <div class="banner_slide_1" id="banner1"></div>
  104.             <div class="banner_slide_2" id="banner2"></div>
  105.             <div class="banner_slide_3" id="banner3"></div>
  106.         </div>
  108.     </body>
  110. </html>

作者博客：[pspgbhu](http://ghosertblog.github.com)

作者GitHub：https://github.com/pspgbhu

欢迎转载，但请注明出处，谢谢！

  1.  

原生js+css3实现图片自动切换，图片轮播的更多相关文章

  1. 原生 JS 实现 VS Code 自动切换输入法状态！这次没有AHK

    上一篇文章:使用 AHK 在 VS Code 中根据上下文自动切换输入法状态 给出一个使用 ahk 在 VSCode 自动切换输入法的方法.不过这个方法实际上很蹩脚,一点都不优(zhuang)雅(bi ...

  2. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  3. jquery 图片自动切换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JQury自动切换图片

    [标签]Jquery图片自动切换<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  5. tab切换效果 网站中的图片自动切换

    网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...

  6. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  8. 分别用css3、JS实现图片简单的无缝轮播功效

    本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...

  9. 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏

    项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...

随机推荐

  1. 关于 Chrome 浏览器中 onresize 事件的 Bug

    我在写插件时用到了 onresize 事件,在反复地测试后发现该事件在 Chrome 及 Opera(内核基本与 Chrome 相同,以下统称 Chrome)浏览器打开时就会执行,这种情况也许不能算作 ...

  2. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  3. WinForm 天猫2013双11自动抢红包【源码下载】

    1. 正确获取红包流程 2. 软件介绍 2.1 效果图: 2.2 功能介绍 2.2.1 账号登录 页面开始时,会载入这个网站:https://login.taobao.com/member/login ...

  4. kindeditor4整合SyntaxHighlighter，让代码亮起来

    这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换 ...

  5. ASP.NET Core中如影随形的”依赖注入”[上]: 从两个不同的ServiceProvider说起

    我们一致在说 ASP.NET Core广泛地使用到了依赖注入,通过前面两个系列的介绍,相信读者朋友已经体会到了这一点.由于前面两章已经涵盖了依赖注入在管道构建过程中以及管道在处理请求过程的应用,但是内 ...

  6. Redis链表实现

    链表在 Redis 中的应用非常广泛, 比如列表键的底层实现之一就是链表: 当一个列表键包含了数量比较多的元素, 又或者列表中包含的元素都是比较长的字符串时, Redis 就会使用链表作为列表键的底层 ...

  7. AFNetworking 3.0 源码解读（六）之 AFHTTPSessionManager

    AFHTTPSessionManager相对来说比较好理解,代码也比较短.但却是我们平时可能使用最多的类. AFNetworking 3.0 源码解读(一)之 AFNetworkReachabilit ...

  8. ASP.NET SignaiR 实现消息的即时推送，并使用Push.js实现通知

    一.使用背景 1. SignalR是什么? ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.实时 Web 功能是指 ...

  9. Ubuntu搭建lnmp环境

    1.安装nginx 安装 sudo apt-get install nginx 服务启动.停止.重启 /etc/init.d/nginx start /usr/sbin/nginx -c /etc/n ...

  10. http status code

    属于转载 http status code:200:成功,服务器已成功处理了请求,通常这表示服务器提供了请求的网页 404:未找到,服务器未找到 201-206都表示服务器成功处理了请求的状态代码,说 ...