图片轮播代码
图片轮播代码 简洁的图片轮播 效果图 图片轮播 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 -- * { margin0; padding0; border0; } jianting { height 40px; width 600px; margin 0 auto; border 1 px solid D03204; } pic { positionrelative; overflow hidden; width3000px; height400px; } pic ul{ list-style-typenone; positionabsolute; width3000px; } pic ul li{ floatleft; width600px; } pic img{ width600px; height400px; } tip { height 25px; width 240px; positionabsolute; right0; bottom0; } tip span{ padding5px 15px; text-aligncenter; cursorpointer; colorFFF; } tip .normal{ colorfff; font-size16px; font-weightnormal; } tip .current{ color F00; font-size20px; font-weightbolder; } mybox { height 400px; width 600px; margin30px auto; border 5px solid 07980B; position relative; overflowhidden; } -- /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 addEventLoadfunc{ var oldonloadwindow.onload; iftypeofwindow.onload function{ window.onload func; } else{ window.onload function{ oldonload; func; } } } ////初始化文件加载时默认图片及默认样式 function current{ var curImg,curTip; curImg document.getElementByIdpic; curImg.style.left 0px; curTip document.getElementByIdtip.getElementsByTagNamespan; curTip[0].className current; } addEventLoadcurrent; //初始化数字序号样式 function classNormal{ var nums document.getElementByIdtip.getElementsByTagNamespan; forvar i 0; i nums.length; i { nums[i].className normal; } } //初始化当前数字序号样式 function classCurrentn{ var nums document.getElementByIdtip.getElementsByTagNamespan; nums[n].className current; } //移动图片 function movePicfx,fy,interval{ var elem,xpos,ypos; elem document.getElementByIdpic; xpos parseIntelem.style.left;////取不到 style.left 和 style.top 的值, 因此下面先做一下推断, 假如是 NaN 就初始化赋值为 0 yposparseIntelem.style.top; ifisNaNxpos{ xpos 0; } else{ xpos parseIntelem.style.left; } ifisNaNypos{ ypos0; } else{ yposparseIntelem.style.top; } ifelem.movement{ window.clearTimeoutelem.movement;////清除定时器的影响干扰, 使每一次变换图片时不被