【轮播】特效

?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js图片轮播效果</title>
</head>
 
<body><SCRIPT>
var widths=1024;            
var heights=500;            
var counts=2; 
img1=new Image ();img1.src='http://img.bimg.126.net/photo/VsdVAVDDEzP3p9p3YBlrMg==/4287426845257204529.jpg';
img2=new Image ();img2.src='http://img.bimg.126.net/photo/8waQTmu_pjpP3KxzNFt3ew==/2576903411787460787.jpg';
url1=new Image ();url1.src='http://geyaomin123.blog.163.com';
url2=new Image ();url2.src='http://geyaomin123.blog.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()',3000);}
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>
 
</body>
</html>

上面一个华丽一些，也简单一些

复制代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片轮播</title>
<mce:style><!--
*{ padding:0; margin:0}
p.now{ display:block;}
li{ background:#f9f9f9}
li.now{ color:#fff; background:#999}
li{ list-style:none;float:left; padding:0 10px; border:1px solid #ccc}
#fd{ position:relative;height:223px; width:259px; background:#ccc; overflow:hidden}
#fd img{ position:absolute; top:10px; left:10px;}
#fd ul{ position:absolute; height:20px; bottom:40px;_bottom:39px; right:10px; _right:9px}
#fd h4{ display:none; position:absolute; height:40px; bottom:-10px; left:10px;}
.clearfix:after{ content:"."; display:block; clear:both; height:0; visibility:hidden}
.clearfix{ display:block; height:1%}
--></mce:style><style  _mce_bogus="1"><!--
*{ padding:0; margin:0}
p.now{ display:block;}
li{ background:#f9f9f9}
li.now{ color:#fff; background:#999}
li{ list-style:none;float:left; padding:0 10px; border:1px solid #ccc}
#fd{ position:relative;height:223px; width:259px; background:#ccc; overflow:hidden}
#fd img{ position:absolute; top:10px; left:10px;}
#fd ul{ position:absolute; height:20px; bottom:40px;_bottom:39px; right:10px; _right:9px}
#fd h4{ display:none; position:absolute; height:40px; bottom:-10px; left:10px;}
.clearfix:after{ content:"."; display:block; clear:both; height:0; visibility:hidden}
.clearfix{ display:block; height:1%}
--></style>
</head>
<body>
<div id="fd">
<h4 style="display:block;" _mce_style="display: block;">这是图一</h4>
<p class="now"><img src="http://bbs.blueidea.com/attachment.php?aid=110342&k=2c2d1b761b9bffad27149117fcb65dc1&t=1232117794&noupdate=yes" _mce_src="http://bbs.blueidea.com/attachment.php?aid=110342&k=2c2d1b761b9bffad27149117fcb65dc1&t=1232117794&noupdate=yes" width="239" height="173" /></p>
<h4>这是图二</h4>
<p style="display:none" _mce_style="display: none;"><img src="http://bbs.blueidea.com/attachment.php?aid=110343&k=48d66d410526376c1ce9dd1a530dd944&t=1232117794&noupdate=yes" _mce_src="http://bbs.blueidea.com/attachment.php?aid=110343&k=48d66d410526376c1ce9dd1a530dd944&t=1232117794&noupdate=yes" width="239" height="173" /></p>
<h4>这是图三</h4>
<p style="display:none" _mce_style="display: none;"><img src="http://bbs.blueidea.com/attachment.php?aid=110344&k=c7e53c756236e712812c07c29894ed7d&t=1232117794&noupdate=yes" _mce_src="http://bbs.blueidea.com/attachment.php?aid=110344&k=c7e53c756236e712812c07c29894ed7d&t=1232117794&noupdate=yes" /></p>
<h4>这是图四</h4>
<p style="display:none" _mce_style="display: none;"><img src="http://bbs.blueidea.com/attachment.php?aid=110345&k=e081581af3d17d54f8bf9f5cdfdf785c&t=1232117794&noupdate=yes" _mce_src="http://bbs.blueidea.com/attachment.php?aid=110345&k=e081581af3d17d54f8bf9f5cdfdf785c&t=1232117794&noupdate=yes" /></p>
<ul class="clearfix">
<li class="now">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<mce:script type="text/javascript"><!--
function $(id){return document.getElementById(id)}//获取ID节点的简介方法
var tags=$("fd").getElementsByTagName("li");//获取切换按钮节点
var cats=$("fd").getElementsByTagName("p");//获取切换内容节点
var tts=$("fd").getElementsByTagName("h4");
var current=null;//设置当前帧的变量容器
var timer=2000;//
var op=0;  
function disAll(){//初始所有标签样式
 for(var i=0; i<tags.length; i++){
       tags[i].className="";
       cats[i].className="";
    cats[i].style.display="none";
    tts[i].style.display="none";
     }
  }
function setNow(){//获取当前帧的索引值
  for(var i=0; i<tags.length; i++){
    if(tags[i].className=="now"){
          current=i;    
         }
   } 
}
for(var j=0; j<tags.length; j++){//设置手动切换
    tags[j].onmouseover=function(){ 
   show();
    clearInterval(h);  
     disAll();   
      this.className="now";
    setNow();   
     cats[current].style.display="block";
     cats[current].className="now";   
      }
   tags[j].onmouseout=function(){
         setNow();    
      }
    }
function goNext(){//自动切换
   setNow();//获取当前帧索引
   current+=1;//帧自增1
  if(current>=tags.length){//判断：如果当前帧索引值是否大于切换按钮总数，如果大于按钮总数则回到初始状态
    current=0;
      disAll();
   show(); 
       cats[0].style.display="block";
    tts[0].style.display="block";
        tags[0].className="now";
         cats[0].className="now";
        }
    else{
       disAll();      
      show(); 
   cats[current].style.display="block";   
      cats[current].className="now";
         tags[current].className="now";      
   }
}
var h=setInterval("goNext()",timer)//开始自动切换
//渐变效果 only for FF
function show(){
      op+=20;
       if(op>100){
     op=0;  
     clearTimeout(t);
      h=setInterval("goNext()",timer);                
               }
     else{
       clearInterval(h); 
       var t=setTimeout("show()",100); 
    cats[current].style.filter = "alpha(opacity=" + op + ")";   
          cats[current].style.opacity=op/100;
    tts[current].style.opacity=op/100;
    tts[current].style.display="block";
    tts[current].style.bottom=op-110+"px";
         }
 
  }
// --></mce:script>
</body>
</html>
复制代码

作者：【唐】三三

出处：https://www.cnblogs.com/tangge/archive/2011/01/11/1932672.html

版权：本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   【唐】三三  阅读(265)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
点击右上角即可分享
微信分享提示
AI IDE Trae