图片轮播代码
图片轮播代码 简洁的图片轮播 效果图: 图片轮播 DW代码: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1 .0 Transitional//EN 1/DTD/xhtml1 -transitional.dtd html xmlns= head meta ; charset= utf-8 / title焦点图片轮播 /title style type= text/css !-- * { margin:0; padding:0; border:0; } #jianting { height: 40px; width: 600px; margin: 0 auto; border: 1 px solid # D03204; } #pic { position:relative; overflow: hidden; width:3000px; height:400px; } # pic ul{ list-style-type:none; position:absolute; width:3000px; } #pic ul li{ float:left; width:600px; } #pic img{ width:600px; height:400px; } #tip { height: 25px; width: 240px; position:absolute; right:0; bottom:0; } #tip span{ padding:5px 15px; text-align:center; cursor:pointer; color:#FFF; } #tip .normal{ color:#fff; font-size:16px; font-weight:normal; } # tip .current{ color:# F00; font-size:20px; font-weight:bolder; } #mybox { height: 400px; width: 600px; margin:30px auto; border: 5px solid #07980B; position: relative; overflow:hidden; } -- /style /head body div id= mybox div id= pic ul height= 41 1 / /li li img src= lunbo-img/liehuo_net_600 x400_1.jpg width= 596 li img src= lunbo-img/liehuo_net_600 x400_2.jpg width= 600 height= 400 / /li li img src= lunbo-img/liehuo_net_600 x400_3.jpg width= 600 height= 400 / /li li img src= lunbo-img/liehuo_net_600 x400_4.jpg width= 600 height= 400 / /li li img src= lunbo-img/liehuo_net_600 x400_5.jpg width= 600 height= 401 / /li /ul /div div id= tip span 1 /span span 2 /span span 3 /span span 4 /span span 5 /span /div /div div id= jianting /div script type= text/javascript //加载 window.onload 函数 function addEventLoad(func){ var oldonload=window.onload; if(typeof(window.onload)!= function){ window.onload= func; } else{ window.onload= function(){ oldonload(); func(); } } } ////初始化文件加载时默认图片及默认样式 function current(){ var curImg,curTip; curImg= document.getElementById(pic); curImg.style.left= 0px; curTip= document.getElementById(tip).getElementsByTagName(span); curTip[0].className= current; } addEventLoad(current); //初始化数字序号样式 function classNormal(){ var nums= document.getElementById(tip).getElementsByTagName(span); for(var i= 0; i nums.length; i++ ){ nums[i].className= normal; } } //初始化当前数字序号样式 function classCurrent(n){ var nums= document.getElementById(tip).getElementsByTagName(span); nums[n].className= current; } //移动图片 function movePic(fx,fy,interval){ var elem,xpos,ypos; elem= document.getElementById(pic); xpos= parseInt(elem.style.left);////取不到 style.left 和 style.top 的值, 因此下面先做一下推断, 假如是 NaN 就初始化赋值为 0 ypos=parseInt(elem.style.top); if(isNaN(xpos)){ xpos= 0; } else{ xpos= parseInt(elem.style.left); } if(isNaN(ypos)){ ypos=0; } else{ ypos=parseInt(elem.style.top); } if(elem.movement){ window.clearTimeout(elem.movement);////清除定时器的影响干扰, 使每一次变换图片时不被