javascript---淡入淡出的效果轮换转播后续

今天在网上找了个例子终于把这个困扰我几天的淡入淡出效果写出来了自己在火狐和IE6下试了下都没问题，一向我都不擅长写这些setTimeout和setInterval的例子，今天是参考了网上一个类似例子的做法，在原有基础上改动好了，不多说，先上代码：

<!DOCTYPE html>
<html>
<head><title> fade in</title><style>#out{width:600px; height:200px;margin:0 auto; border:1px solid #333; overflow:hidden}#out ul{margin:0; padding:0;position:relative;}#out li{list-style:none;float:left;position:absolute;}</style>
</head>
<body>
<div id="out">
<ul>
<li><a href="javascript:void(0)"><img src="data:image/1.jpg" width="600" height="200"/></a></li>
<li><a href="javascript:void(0)"><img src="data:image/2.jpg" width="600" height="200"/></a></li>
<li><a href="javascript:void(0)"><img src="data:image/3.jpg" width="600" height="200"/></a></li>
<li><a href="javascript:void(0)"><img src="data:image/4.jpg" width="600" height="200"/></a></li>
</ul>
</div>
<ul >
<li><a href="javascript:void(0);" onclick="showCertainImage(0)">0</a></li>
<li><a href="javascript:void(0);" onclick="showCertainImage(1)">1</li>
<li><a href="javascript:void(0);" onclick="showCertainImage(2)">2</a></li>
<li><a href="javascript:void(0);" onclick="showCertainImage(3)">3</a></li>
</ul>
</body>
<script>function Id(name){return document.getElementById(name);}    function setOpacity(ev, v){ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100;}var out = Id("out");var li = out.getElementsByTagName('li');var len = li.length;for(var i=0; i<len; i++){li[i].style.zIndex = len-i;}function fadeIn(index){        var num = 100;var next = index+1;if(next== len){next = 0;            }for(var i=0; i<len; i++){  //参考网上例子 每次显示当前图片前 都将所有图片的z-index清空，只给当前图片和下一张图片设置z-index属性；
            li[i].style.zIndex = '';}li[index].style.zIndex = 2;    li[next].style.zIndex = 1;setOpacity(li[next], 100);        addTimer = setInterval(function(){if(num==0){clearTimeout(addTimer);}setOpacity(li[index],num);num-=10;            },50);        }var current = 0;    function changeImage(c){    if(!c){c = current;}timer = setTimeout(function(){        if(c == len){ //一轮播放结束后，再次从头播放；
                c = 0;}fadeIn(c); c++; changeImage(c);},3000)            }function showCertainImage(index){ //点击改变图片的入口；if(timer){clearTimeout(timer);}    var next = index+1;if(next == len){next = 0;            }for(var i=0; i<len; i++){li[i].style.zIndex = '';}li[index].style.zIndex = 2;            setOpacity(li[index], 100);changeImage(index);}    changeImage(); //自动轮播的入口;
</script>
</html>

大致的解释我都写在代码里了，这次比上次改进的地方在于index属性，每次执行fadein 不管之前的index如何，全部置空，然后将需要淡入的图片放在最上面，next的图片放在下面设置为不透明，点击的时候，所有图片的zindex置空，然后将当前图片设置为不透明然后放在最上层，这样确实便捷了很多，不管之前的z-index如何，每次都这样设置。

但这样的解决方案也有不妥，做不妥的是，每次执行当前前，首先是for循环置空，这个处理是否有些粗暴了呢~~，至少效率上是不高的。

另由于这个例子是为下一个工作中用的东西做demo,因此绑定事件啊全局变量啊等地方都没考虑，仅仅一个demo~~

转载于:https://www.cnblogs.com/lxin/archive/2012/07/23/2605087.html

javascript---淡入淡出的效果轮换转播后续相关推荐

小程序 · Animation——淡入淡出动画效果
淡入淡出动画效果主要原理是通过控制透明度显示. WXML <view class="add-tip" animation=&quo ...
原生javascript淡入淡出焦点图 + Jquery实现方法
淡入淡出焦点图效果类这里是缓动焦点图链接: JavaScript 缓动焦点图实现的几种写法封装 + 函数式 + JQuery 焦点图实现思路: 原生JS的类的调用方式: var slider1 ...
vue实现轮播图（淡入淡出呼吸效果）
Vue简简单单实现淡入淡出轮播图效果,不依赖任何第三方插件或组件,开箱即用,欢迎C+V. 主页里还有无缝滚动.跑马灯轮播图,地址如下:https://blog.csdn.net/m0_59224033 ...
js原生 JavaScript轮播图【渐变淡入淡出】效果实现（附代码）
目录前言轮播图的组成以及实现思想左右按钮的隐藏与显示核心思想代码实现动态生成底部小圆圈核心思想代码实现右左按钮实现核心思想代码实现实现自动播放核心思想代码实现整体代码(复 ...
Unity中的淡入淡出效果
一.问题想要在场景的转换做个过渡,不想直接的跳转.最简单的就是做个淡入淡出的效果. 二.搜索百度基本是不指望了,资料太少,所以要用google,并且英文搜索. 搜关键字"unity3d ...
【转】C#使用GDI+制作背景颜色淡入淡出效果的按钮
C#使用GDI+制作背景颜色淡入淡出效果的按钮 2010-04-14 来自:CNBLOG 字体大小:[大中小] 摘要:本文介绍C#使用GDI+制作背景颜色淡入淡出效果的按钮,并提供完整的示例和 ...
jQuery 实现淡入淡出效果
上一节我们学习了如何实现元素的显示与隐藏,本节我们来学习如何实现元素的淡入淡出效果. fadeIn()方法 fadeIn() 方法用于淡入已隐藏的元素. 语法如下所示: $(selector).fad ...
html背景音乐淡入,音乐淡入淡出软件音乐淡入淡出什么意思给视频的背景音乐做淡入淡出效果...
看到今天的这个标题可能大家就有点蒙圈了哈,肯对大多都在想一个问题:"什么叫音乐淡入淡出呢".哈哈,其实所谓音乐淡入淡出的意思就是开始的时候音乐声音是缓缓变大,不会突然很大.结束的时 ...
今日份安利：音频淡入淡出效果如何制作？
淡入淡出是在影视音乐作品中,经常会使用到的一种处理技巧.它能够让渐渐引入音乐,又移除音乐,不会给人产生很突兀的感觉.小伙伴们在制作短视频的时候,也可以使用这种技巧,这能够让短视频产生不错的效果.那你们 ...

javascript---淡入淡出的效果轮换转播后续

javascript---淡入淡出的效果轮换转播后续相关推荐

最新文章

热门文章