图片的淡入淡出成效

2013-04-05

图片的淡入淡出效果这里面总共放了5张图片想要的效果：1、图片淡入淡出，慢慢的消失，慢慢的显现2、图片每隔4

图片的淡入淡出效果
图片的淡入淡出成效
这里面总共放了5张图片想要的效果：1、图片淡入淡出，慢慢的消失，慢慢的显现
2、图片每隔4秒或者一段时间图片就交替一次
3、通过点击上面的数字标点，交替图片
求教该如何写呢。。。。。谢谢大家。。。 javascript web
[解决办法]
用jquery吧，那样是好方便的，http://www.ablanxue.com/prone_3054_1.html
jquery淡入淡出的全屏广告幻灯片切换特效代码

[解决办法]
两个重叠的层，div1在下，div2在上。
通过改变div2的透明度实现淡入淡出效果。
IE上做的，别的浏览器可能不兼容


 <HEAD>
  <TITLE> 淡入淡出 </TITLE>
  <style>
div { text-align:center; font-size:12px; font-weight:bold; font-family:Arial}
div .normal {float:left; width:20px; height:15px; cursor:pointer; filter:alpha(opacity:50); margin-left:1px; background:white; color:#333;}
div .active  {float:left; width:20px; height:15px; cursor:pointer; filter:alpha(opacity:50); margin-left:1px; background:red; color:white; }
  </style>
 </HEAD>

 <BODY>
  <div style="width:475px; height:60px; border:2px solid gray">
<div id="div1" style="width:475px; height:60px;"></div>
<div id="div2" style="width:475px; height:60px; float:left; margin-top:-60px; opacity:100"></div>
<div id="div_idx" style="height:15px; margin-top: -15px">
<div class="active" onclick="clk(this)">1</div>
<div class="normal" onclick="clk(this)">2</div>
<div class="normal" onclick="clk(this)">3</div>
<div class="normal" onclick="clk(this)">4</div>
<div class="normal" onclick="clk(this)">5</div>
</div>
  </div>


//两个重叠的层，div1在下，div2在上。通过改变div2的透明度实现淡入淡出效果。

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var currIdx=1, timer, timer2;
//图片数组
var arr = ["http://info-database.csdn.net/Upload/2013-03-05/aliyun3-475-60-0305.jpg",
"http://info-database.csdn.net/Upload/2013-03-15/5th-yunjisuan-475-60-0315.jpg",
"http://info-database.csdn.net/Upload/2013-03-13/unity-560-95-0311.jpg",
"http://info-database.csdn.net/Upload/2013-03-21/ibm-platform-760-90-0321.jpg",
"http://info-database.csdn.net/Upload/2013-03-19/go-760-90-0319.jpg"
];
//装入第一张图片
div2.style.background = "url('"+ arr[0] +"') no-repeat";
//每5秒换一张图片
timer = window.setInterval("fun()", 5000);
//换图片
function fun(){
//改背景图片
if (currIdx == arr.length) currIdx = 0;
if ( div2.style.opacity == 0) div2.style.background = "url('"+ arr[currIdx] +"') no-repeat";
else div1.style.background = "url('"+ arr[currIdx] +"') no-repeat"; 
 
//改序号的激活样式
var idxs = document.getElementById("div_idx").childNodes;
for (var i=0; i<idxs.length; i++) idxs[i].className = "normal";
idxs[currIdx].className = "active";
currIdx++;
//设淡入淡出效果的透明度改变量
var rate = 10; //div2淡入
if (parseInt( div2.style.opacity ) == 100) rate = -10;//div2淡出（div1可见）
//每100ms执行一次淡化
timer2 = window.setInterval( "change("+rate+")", 100 );
}
//淡入淡出
function change( rate ) {
//若执行完成后达到最终效果，停止定时执行
if ( parseInt(div2.style.opacity)+rate == 0 
[解决办法]
  parseInt(div2.style.opacity)+rate ==100 ) window.clearInterval(timer2);
//设置透明度
div2.style.filter="alpha(opacity=" + (parseInt(div2.style.opacity)+rate  )+")";
div2.style.opacity= parseInt(div2.style.opacity) + rate ;
}
//点击序号
function clk(divobj) {
currIdx= parseInt(divobj.innerText)-1;
//停止原定时执行器
window.clearInterval(timer);
//所选图片淡入
fun();
//新定时器开始
timer = window.setInterval("fun()", 5000);
}

[解决办法]
代码自己写吧。下面写个思路。
由于那五个数字按钮总要显示，所有在一个div中绝对定位一个显示按钮的图片，div中另外放一个img元素对应当前显示的图片，上面的绝对定位的图片进行分区，使点击不同的数字时div的当前图片修改。淡入淡出效果通过改变div中img的透明度实现。
js中的关键部分：
var images=[];//要展示的图片数组
var currentIndex//当前显示图片的指标
fadeOut()//淡出
fadeIn()//淡入
showPic()//调用fadeOut和fadeIn实现淡入淡出
changeIndex()//点击按钮时或自动切换时间到期时调用，

自动切换时间到期或点击按钮时执行changeIndex()设置全局变量currentIndex，接着调用showPic()

html结构
<style type="text/css">
div{
  position:relative;
  width:400px;//div的尺寸根据图片尺寸设置
  height:400px;
}
#img{
opacity:0;
filter:alpha(opacity:0);
}
#img2{
position:absolute;
}
</style>
<div><img id="img1" /><img id="img2"/></div>
[解决办法]
  // banner动画
      mv.app.toBanner=function(){

   var oAd=document.getElementById('ad');
   var aLi=oAd.getElementsByTagName('li');

   var oPrev=getByClass(oAd,'prev')[0];
   var oNext=getByClass(oAd,'next')[0];

   var oPrevBg=getByClass(oAd,'prev_bg')[0];
           var oNextBg=getByClass(oAd,'next_bg')[0];

   // 自动播放
   var iNow = 0;

           var timer = setInterval(auto,5000);

       function toAlpha()
       {
for(var i=0;i<aLi.length;i++){
  startMove(aLi[i],{opacity:0,});
}

startMove(aLi[iNow],{opacity:100,});
};

   function auto()
   {

if(iNow == aLi.length-1){
iNow = 0;
}
else{
    iNow++;
     }

toAlpha();

   };
   function autoPrev()
   {

if(iNow == 0){
iNow = aLi.length-1;
}
else{
   iNow--;
     }

toAlpha();
   };

    // 遮罩层
   oPrevBg.onmouseover=oPrev.onmouseover=function(){
    oPrev.style.display='block';
clearInterval(timer);
   };
   oNextBg.onmouseover=oNext.onmouseover=function(){
    oNext.style.display='block';
clearInterval(timer);
   };
   oPrevBg.onmouseout=oPrev.onmouseout=function(){
    oPrev.style.display='none';
timer = setInterval(auto,5000);
   };
   oNextBg.onmouseout=oNext.onmouseout=function(){
    oNext.style.display='none';
timer = setInterval(auto,5000);
   };

    //按钮点击事件
   oPrev.onclick=function(){
   autoPrev();
   };
   oNext.onclick=function(){
       auto();
   };
  };

// JavaScript Document

//不同浏览器获取非行间样式的方法
function getStyle(obj,attr)
{
      if(obj.currentStyle)
  {
      return obj.currentStyle[attr];   //IE

  }else{
          return getComputedStyle(obj,null)[attr]; // FF chrome
   }
};

function startMove(obj,json,fnEnd)
{
   clearInterval(obj.timer);
   obj.timer=setInterval(function(){
   var bStop=true; // 假设所有的值都已经到了

        for(var attr in json)
{
   var cur=0;

       //判断

if(attr=='opacity'){
    cur=Math.round(parseFloat(getStyle(obj,attr))*100);
  }else{
        cur=parseInt(getStyle(obj,attr));
       }

//计算

var speed=(json[attr]-cur)/12;
speed=speed>0?Math.ceil(speed):Math.floor(speed);

  if(cur!=json[attr]) bStop=false; //如果有一个未到目标，假设不成立，false

  if(attr=='opacity'){
  obj.style.filter='alpha(opacity:'+(cur+speed)+')';
  obj.style.opacity=(cur+speed)/100;
}else{
   obj.style[attr]=cur+speed+'px';
      }
         }
if(bStop)
{

   clearInterval(obj.timer); //所有值都到达目标，关闭定时器

   if(fnEnd) fnEnd();
}
  },30);
};

CSS 你自己写

热点排行