首页 > 代码库 > 一个简单的图片轮播功能（图片自动播放，点击控件可直接跳转对对应图片）
一个简单的图片轮播功能（图片自动播放，点击控件可直接跳转对对应图片）
<!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" /><style type="text/css" >.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}.d2{width:100%;height:209px;overflow:hidden;}.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}.num_list span{display:inline-block;height:16px;padding-left:6px;}/*图片隐藏*/ul{display:none;}/*导航控制按钮，堆叠在最顶层,底部右置，文字加粗*/.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}/*控制按钮样式 非选中状态 为什么还有b2*/ .b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}/*控制按钮样式 选中状态 */ .b2{color:#FFCC33;background-color:#FF6633;}</style><script language="javascript" type="text/javascript">//主函数var s=function(){ var turnTime=2000; //切换间隔时间 var turnSpeed=10; //切换速速 var textView=80; //文字背景的透明度 var source="content" //焦点轮换图片容器的id名称 //获取对象 function getTag(tag,obj){ if(obj==null){ return document.getElementsByTagName(tag) } else{ return obj.getElementsByTagName(tag) } } function getid(id){ return document.getElementById(id) } var opac=0, j=0,//鼠标点击控制按钮的序号 t=63, num, scton=0, timer, timer2, timer3; var id=getid(source);//获得存放图片的容器 var li=getTag("li",id);//获得图片存放列表 var div=document.createElement("div"); var title=document.createElement("div"); var span=document.createElement("span"); var button=document.createElement("div"); button.className="button"; //轮播控制按钮 for(var i=0;i<li.length;i++){ var a=document.createElement("a"); a.innerHTML=i+1; a.onclick=function(){ clearTimeout(timer); clearTimeout(timer2); clearTimeout(timer3); j=parseInt(this.innerHTML)-1; scton=0;t=63;opac=0; fadeon(); } a.className="b1"; a.onmouseover=function(){ this.className="b2" } a.onmouseout=function(){ this.className="b1"; sc(j) } button.appendChild(a); } //控制图层透明度 function alpha(obj,n){ if(document.all){ obj.style.filter="alpha(opacity="+n+")"; }else{ obj.style.opacity=(n/100); } } //控制焦点按钮 function sc(n){ for(var i=0;i<li.length;i++){ button.childNodes[i].className="b1"; } button.childNodes[n].className="b2"; } title.className="num_list"; title.appendChild(span); alpha(title,textView); id.className="d1"; div.className="d2"; id.appendChild(div); id.appendChild(title); id.appendChild(button); //渐显 var fadeon=function(){ opac+=5; div.innerHTML=li[j].innerHTML; span.innerHTML=getTag("img",li[j])[0].alt; alpha(div,opac); if(scton==0){ sc(j); num=-2; scrolltxt(); scton=1 } if(opac<100){ timer=setTimeout(fadeon,turnSpeed); } else{ timer2=setTimeout(fadeout,turnTime); } } //渐隐 var fadeout=function(){ opac-=5; div.innerHTML=li[j].innerHTML; alpha(div,opac); if(scton==0){ num=2; scrolltxt(); scton=1; } if(opac>0){ timer=setTimeout(fadeout,turnSpeed) }else{ if(j<li.length-1){ j++; }else{ j=0; } fadeon(); } } //滚动文字 var scrolltxt=function(){ t+=num; span.style.marginTop=t+"px"; if(num<0 && t>3){ timer3=setTimeout(scrolltxt,turnSpeed); }else if(num>0 && t<62){ timer3=setTimeout(scrolltxt,turnSpeed); }else{ scton=0; } } fadeon();}//初始化window.onload=s;</script><title>Javascript图片幻灯效果</title></head><body><div id="content"> <ul> <li><a href="#" target="_blank"><img src="pic/1.jpg" width="443" height="209" alt="展示图片1" /></a></li> <li><a href="#" target="_blank"><img src="pic/2.jpg" width="443" height="209" alt="展示图片2" /></a></li> <li><a href="#" target="_blank"><img src="pic/3.jpg" width="443" height="209" alt="展示图片3" /></a></li> <li><a href="#" target="_blank"><img src="pic/4.jpg" width="443" height="209" alt="展示图片4" /></a></li> </ul></div></body></html>
HTML代码如上，本人因为有次笔试题做到了，当时没做出来，现在有空了附上代码，欢迎大家多多交流 ：D
一个简单的图片轮播功能（图片自动播放，点击控件可直接跳转对对应图片）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。