图片的淡入淡出效果
这里面 总共放了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 你自己写