图片的淡入淡出效果 这里面 总共放了5张图片 想要的效果:1、图片淡入淡出,慢慢的消失,慢慢的显现 2、图片每隔4秒或者一段时间图片就交替一次 3、通过点击上面的数字标点,交替图片求教该如何写呢。。谢谢大家javascriptweb 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 淡入淡出可以用setTimeout设置透明度实现按钮的话只是改变透明度和换图片试试 DemofadeIn([speed],[easing],[fn])$("p").fadeIn("slow"); 两个重叠的层,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 你自己写 jquery 有fade效果,实现淡入淡出,在hide和show里面添加就可以了 jquery 阻止click,mouseover,mouseout冒泡问题 在html标签上非法属性会怎么样? 添加表格中的一行 JS创建Script节点的问题 如果给img加链接 意外地调用了方法或属性访问 aspx下脚本问题 网络游戏公司急招网站开发人员!!! 如何使onunload只在关闭窗口时触发,而页面刷新的时不触发。散分了!! 有没有类似MySQL客户端的在线编辑器? 关于注释JS代码。 window.onload方法启动的js方法,能用控件单独控制么?
按钮的话只是改变透明度和换图片试试
fadeIn([speed],[easing],[fn])
$("p").fadeIn("slow");
通过改变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>
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 你自己写