DIV模拟循环展示效果的实现方法是什么? http://www.wonderwall.com我想 单纯用 DIV + JS 能否实现 该网站的 移动显示效果? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 可以,不过先提醒楼主,渐隐渐现的效果在各个浏览器的实现不一样,需要分开考虑。说点关键步骤吧:1.渐隐渐现的效果其实就是不断改变图片透明度,从100%到0或者0到100%。2.从一张图片切换到另一个图片,不用一个渐隐一个渐现,其实把两张的style都设成position:absolute; left:0; top:0,这样两张图片就会重合在一块,加上z-index就能控制它们的前后顺序。这样前面一张渐隐后面一张就自动的渐现了;或者前面一张渐现,后面一张就自动的渐隐了剩下的就是如何顺序显示图片的问题了,相信不难解决 谢谢你的回复。我不需要 渐隐 效果,需要 移动的 效果。就像 轮换 效果一样。http://www.wonderwall.com 如这个网站的 移动效果 <script> var widths=292; var heights=505; var counts=6; img1=new Image ();img1.src='images/shan.jpg'; img2=new Image ();img2.src='images/pugongying.jpg'; img3=new Image ();img3.src='images/shan.jpg'; img4=new Image ();img4.src='images/shou.jpg'; img5=new Image ();img5.src='images/yu.jpg'; img6=new Image ();img6.src='images/pugongying.jpg'; url1=new Image ();url1.src='http://www.163.com'; url2=new Image ();url2.src='http://www.163.com'; url3=new Image ();url3.src='http://www.163.com'; url4=new Image ();url4.src='http://www.163.com'; url5=new Image ();url5.src='http://www.163.com'; url6=new Image ();url6.src='http://www.163.com'; var nn=1; var key=0; function change_img() { if(key==0){ key=1; } else if(document.all){ document.getElementById("pic").filters[0].Apply(); document.getElementById("pic").filters[0].Play(duration=2); } eval('document.getElementById("pic").src=img'+nn+'.src'); eval('document.getElementById("url").href=url'+nn+'.src'); for (var i=1;i<=counts;i++){ document.getElementById("xxjdjj"+i).className='axx'; } document.getElementById("xxjdjj"+nn).className='bxx'; nn++; if(nn>counts){ nn=1; } tt=setTimeout('change_img()',4000);} function changeimg(n){ nn=n;window.clearInterval(tt);change_img();} document.write('<style>'); document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}'); document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}'); document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}'); document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}'); document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}'); document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}'); document.write('</style>'); document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">'); document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>'); document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">'); for(var i=1;i<counts+1;i++){ document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>'); } document.write('</div></div>'); change_img(); </script> 楼主这样的效果不知道是否是你想要的。 看下这个,我写的Javascript 实现连续可停止 滚动字幕(或图片等),代码很简单一点http://blog.csdn.net/zhhphappy/archive/2008/07/03/2608169.aspx 百思不得其解的一个问题 拖动的div层出现的选中问题 如何将textarea里的内容保存到xml里?急!!! firefox上鼠标划过链接,播放声音,如何实现... 【广州】招聘java软件工程师 怎样用javascript脚本来控制跳到锚点 请问 一个窗口中放一个链接,在点击这个链接时,在新窗口中打开并且原来的窗口自动关闭? 请问有没例子,--就是当鼠标放上菜单上,菜单的背景图片会就成别的图片或颜色??? 针对不同浏览器差别用来调整显示界面的代码,老鸟们可以,解释一下吗? 本人想学JAVA,但不知用什么开发工具好呀? event的意思 获取父窗口子frame内的表格
1.渐隐渐现的效果其实就是不断改变图片透明度,从100%到0或者0到100%。
2.从一张图片切换到另一个图片,不用一个渐隐一个渐现,其实把两张的style都设成position:absolute; left:0; top:0,这样两张图片就会重合在一块,加上z-index就能控制它们的前后顺序。这样前面一张渐隐后面一张就自动的渐现了;或者前面一张渐现,后面一张就自动的渐隐了
剩下的就是如何顺序显示图片的问题了,相信不难解决
谢谢你的回复。
我不需要 渐隐 效果,需要 移动的 效果。
就像 轮换 效果一样。http://www.wonderwall.com 如这个网站的 移动效果
var widths=292;
var heights=505;
var counts=6;
img1=new Image ();img1.src='images/shan.jpg';
img2=new Image ();img2.src='images/pugongying.jpg';
img3=new Image ();img3.src='images/shan.jpg';
img4=new Image ();img4.src='images/shou.jpg';
img5=new Image ();img5.src='images/yu.jpg';
img6=new Image ();img6.src='images/pugongying.jpg';
url1=new Image ();url1.src='http://www.163.com';
url2=new Image ();url2.src='http://www.163.com';
url3=new Image ();url3.src='http://www.163.com';
url4=new Image ();url4.src='http://www.163.com';
url5=new Image ();url5.src='http://www.163.com';
url6=new Image ();url6.src='http://www.163.com';
var nn=1;
var key=0;
function change_img()
{
if(key==0){
key=1;
}
else if(document.all){
document.getElementById("pic").filters[0].Apply();
document.getElementById("pic").filters[0].Play(duration=2);
}
eval('document.getElementById("pic").src=img'+nn+'.src');
eval('document.getElementById("url").href=url'+nn+'.src');
for (var i=1;i<=counts;i++){
document.getElementById("xxjdjj"+i).className='axx';
}
document.getElementById("xxjdjj"+nn).className='bxx';
nn++;
if(nn>counts){
nn=1;
}
tt=setTimeout('change_img()',4000);
}
function changeimg(n){
nn=n;window.clearInterval(tt);change_img();
}
document.write('<style>');
document.write('.axx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;}');
document.write('a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;}');
document.write('.bxx{padding:1px 7px;border-left:#cccccc 1px solid;}');
document.write('a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;}');
document.write('</style>');
document.write('<div style="width:'+widths+'px;height:'+heights+'px;overflow:hidden;text-overflow:clip;">');
document.write('<div><a id="url"><img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width='+widths+' height='+heights+' /></a></div>');
document.write('<div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;">');
for(var i=1;i<counts+1;i++){
document.write('<a href="javascript:changeimg('+i+');" id="xxjdjj'+i+'" class="axx" target="_self">'+i+'</a>');
}
document.write('</div></div>');
change_img();
</script> 楼主这样的效果不知道是否是你想要的。
http://blog.csdn.net/zhhphappy/archive/2008/07/03/2608169.aspx