原生js+css3实现图片自动切换，图片轮播
运用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就无法被正确的撑开，为我们的页面布局带来了困扰。
再其次的问题是，这个轮播图主要意图是用于页面顶部的巨大的横幅广告，但是在写代码时并没有考虑到面对不同分辨率情况下的展现效果，因此还有许多改良的空间。
想了想还是不把之前有问题的代码删掉了，正确代码在最后面
这是之前有问题的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片自动切换 图片轮播</title>
<style type="text/css">
/*注意 第一张图片z-index值是5，后面的图片值为1*/
*{margin: 0;padding: 0;}
.banner {
width: 1920px;
height: 493px;
position: relative;
}
.banner_slide_1 {
position: absolute;
top: 0;
left: 0;
display: block;
transition: opacity 0.5s;
opacity: 1;
z-index: 5;
}
.banner_slide_2 {
position: absolute;
top: 0;
left: 0;
display: none;
transition: opacity 0.5s;
opacity: 0;
z-index: 1;
}
.banner_slide_3 {
position: absolute;
top: 0;
left: 0;
display: none;
transition: opacity 0.5s;
opacity: 0;
z-index: 1;
}
</style>
<script type="text/javascript">
window.onload=function bannerSlide() {
var i = 0;
var banner = new Array//将图片创建为一个数组
banner[0] = document.getElementById("banner1");
banner[1] = document.getElementById("banner2");
banner[2] = document.getElementById("banner3");
sli = setInterval(slide, 5000); //轮播间隔时间
function slide() {
if (i == banner.length - 1) {
banner[0].style.display = "block";
banner[0].style.opacity = "1";
banner[i].style.opacity = "0";
setTimeout(function() {
banner[i].style.display = "none";
banner[i].style.zIndex = "1";
banner[0].style.zIndex = "5";
i = 0;
}, 500)
} else {
banner[i + 1].style.display = "block";
banner[i + 1].style.opacity = "1";
banner[i].style.opacity = "0";
setTimeout(function() {
banner[i + 1].style.zIndex = "5";
banner[i].style.display = "none";
banner[i].style.zIndex = "1";
i++;
}, 500)
}
}
}
</script>
</head>
<body>
<div class="banner">
<div class="banner_slide_1" id="banner1"><img src="img/banner.jpg" alt="" /></div>
<div class="banner_slide_2" id="banner2"><img src="img/banner02_02.jpg" /></div>
<div class="banner_slide_3" id="banner3"> <img src="img/banner3.jpg" /></div>
</div>
</body>
</html>
以下为改良后的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{padding: 0;margin: 0;
}
.banner {
width: 100%;
min-width: 1200px;
height: 488px;
overflow: hidden;
}
.banner_index {
position: relative;
}
.banner_slide_1 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
transition: opacity 0.5s;
opacity: 1;
z-index: 5;
background: url(img/banner.jpg) no-repeat;
background-position: center 0;
}
.banner_slide_2 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
transition: opacity 0.5s;
opacity: 0;
z-index: 1;
background: url(img/banner02_02.jpg) no-repeat;
background-position: center 0;
}
.banner_slide_3 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
transition: opacity 0.5s;
opacity: 0;
z-index: 1;
background: url(img/banner3.jpg) no-repeat;
background-position: center 0;
}
</style>
<script type="text/javascript">
window.onload=function bannerSlide() {
if (!document.getElementById) return false;
if (!document.getElementsByTagName) return false;
if (!document.getElementById("bannerBox")) return false;
var i = 0;
var box = document.getElementById("bannerBox");
var banner = box.getElementsByTagName("div");
sli = setInterval(slide, 4000); //轮播间隔时间
function slide() {
if (i == banner.length - 1) {
banner[0].style.display = "block";
banner[0].style.opacity = "1";
banner[i].style.opacity = "0";
setTimeout(function() {
banner[i].style.display = "none";
banner[i].style.zIndex = "1";
banner[0].style.zIndex = "5";
i = 0;
}, 500) //动画过渡时间，搭配CSS使用
} else {
banner[i + 1].style.display = "block";
banner[i + 1].style.opacity = "1";
banner[i].style.opacity = "0";
setTimeout(function() {
banner[i + 1].style.zIndex = "5";
banner[i].style.display = "none";
banner[i].style.zIndex = "1";
i++;
}, 500)
}
}
}
</script>
</head>
<body>
<div id="bannerBox" class="banner banner_index">
<div class="banner_slide_1" id="banner1"></div>
<div class="banner_slide_2" id="banner2"></div>
<div class="banner_slide_3" id="banner3"></div>
</div>
</body>
</html>
作者博客：[pspgbhu](http://ghosertblog.github.com)
作者GitHub：https://github.com/pspgbhu
欢迎转载，但请注明出处，谢谢！
原生js+css3实现图片自动切换，图片轮播的更多相关文章
- 原生 JS 实现 VS Code 自动切换输入法状态！这次没有AHK
上一篇文章:使用 AHK 在 VS Code 中根据上下文自动切换输入法状态 给出一个使用 ahk 在 VSCode 自动切换输入法的方法.不过这个方法实际上很蹩脚,一点都不优(zhuang)雅(bi ...
- js实现图片自动切换效果。
js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...
- jquery 图片自动切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JQury自动切换图片
[标签]Jquery图片自动切换<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- tab切换效果 网站中的图片自动切换
网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...
- Js实现图片点击切换与轮播
Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片
Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...
- 分别用css3、JS实现图片简单的无缝轮播功效
本文主要介绍分别使用CSS3.JS实现图片简单无缝轮播功效: 一.使用CSS3实现:利用animation属性 (实现一张一张的轮播,肉眼只看见一张图片) HTML部分比较简单,两个div下包着几个i ...
- 从零开始手把手教你使用原生JS+CSS3实现幸运水果机游戏
项目体验地址 免费视频教程 游戏介绍 幸运水果机是一款街机游戏,游戏界面由24个方格拼接成一个正方形,每个方格中都有一个不同的水果图形,方格下都有一个小灯.玩家使用游戏币选择希望押注的目标,按下开始后 ...
随机推荐
- 【.net 深呼吸】细说CodeDom（1）：结构大观
CodeDom 是啥东东?Html Dom听过吧,XML Dom听过吧.DOM一般可翻译为 文档对象模型,那 Code + DOM呢,自然是指代码文档模型了.如果你从来没接触过 CodeDom,你大概 ...
- H5坦克大战之【建造敌人的坦克】
公司这几天在准备新版本的上线,今天才忙里偷闲来写这篇博客.接着上一篇的"H5坦克大战之[玩家控制坦克移动2]"(http://www.cnblogs.com/zhouhuan/ ...
- [PHP内核探索]PHP中的哈希表
在PHP内核中,其中一个很重要的数据结构就是HashTable.我们常用的数组,在内核中就是用HashTable来实现.那么,PHP的HashTable是怎么实现的呢?最近在看HashTable的数据 ...
- HTML 事件(一) 事件的介绍
本篇主要介绍HTML中的事件知识:事件相关术语.DOM事件规范.事件对象. 其他事件文章 1. HTML 事件(一) 事件的介绍 2. HTML 事件(二) 事件的注册与注销 3. HTML 事件(三 ...
- div实现自适应高度的textarea，实现angular双向绑定
相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...
- iOS开发之再探多线程编程：Grand Central Dispatch详解
Swift3.0相关代码已在github上更新.之前关于iOS开发多线程的内容发布过一篇博客,其中介绍了NSThread.操作队列以及GCD,介绍的不够深入.今天就以GCD为主题来全面的总结一下GCD ...
- Anders Hejlsberg 技术理想架构开发传奇
Anders Hejlsberg(安德斯-海森博格) 坐在自己的办公室,双眼直直的盯着前方.他要做一个决定,决定自己未来的命运和理想.这是1996年一个普通的下午,几个小时前,他刚与比尔-盖茨结束了 ...
- php 基础代码大全（不断完善中）
下面是基础的PHP的代码,不断完善中~ //语法错误(syntax error)在语法分析阶段,源代码并未被执行,故不会有任何输出. /* [命名规则] */ 常量名 类常量建议全大写,单词间用下划线 ...
- 说说BPM数据表和日志表中几个状态字段的详细解释
有个客户说需要根据这些字段的值作为判断条件做一些定制化需求,所以需要知道这些字段的名词解释,以及里面存储的值具体代表什么意思 我只好为你们整理奉上这些了! Open Work Sheet 0 Sav ...
- [Android]使用Dagger 2来构建UserScope（翻译）
以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/6237731.html 使用Dagger 2来构建UserSco ...