function imggd(){}
imggd.prototype.gd=function(json){
var $=function(id){return document.getElementById(id)}
var t_a=$(json.td_id);
var yhtml=t_a.innerHTML;
var MyMar;
//插入滚动部分和样式
t_a.innerHTML='<div id="img_2"><div id="img_3">'+yhtml+'</div><div id="img_4"></div></div>';
$("img_2").style.float="left";
$("img_3").style.float="left";
$("img_4").style.float="left";
var tab1=$("img_3");
var tab2=$("img_4");
tab2.innerHTML=tab1.innerHTML;
//向上滚动
function top(){
if(t_a.scrollTop>=tab2.offsetHeight)
t_a.scrollTop-=tab1.offsetHeight
else
t_a.scrollTop++;
}
//向下滚动
function bottom(){
if(t_a.scrollTop<=tab2.offsetHeight)
t_a.scrollTop+=tab1.offsetHeight
else
t_a.scrollTop--;
}
//向左滚动
function left(){
if(tab2.offsetWidth-t_a.scrollLeft<=0)
t_a.scrollLeft-=tab1.offsetWidth
else
t_a.scrollLeft++;
}

//向右滚动
function right(){
if(t_a.scrollLeft<=0)
t_a.scrollLeft+=tab2.offsetWidth
else
t_a.scrollLeft--;
}

switch(json.float){
case "top":$("img_2").style.width="100%";MyMar=setInterval(top,json.sd);t_a.onmouseout=function() {MyMar=setInterval(top,json.sd)};break;
case "bottom":$("img_2").style.width="100%";MyMar=setInterval(bottom,json.sd);t_a.onmouseout=function() {MyMar=setInterval(bottom,json.sd)};break;
case "left":$("img_2").style.width="500%";MyMar=setInterval(left,json.sd);alert(json.sd);t_a.onmouseout=function() {MyMar=setInterval(left,json.sd)};break;
case "right":$("img_2").style.width="500%";MyMar=setInterval(right,json.sd);t_a.onmouseout=function() {MyMar=setInterval(right,json.sd)};break;
}
t_a.onmouseover=function() {clearInterval(MyMar)};

}
var image=new imggd();

解决方案 »

  1.   


    <!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>
    <script type="text/javascript" src="imggd.js"></script>
    <style type="text/css">
    #img_1 {float:left;background:#FFF;overflow:hidden;border:1px dashed #CCC;width:600px;height:200px;}
    #img_1 ul{margin:0px; padding:0px;}
    #img_1 ul li{list-style:none; float:left; margin-left:10px; display:inline; text-align:center; line-height:30px;}
    #img_1 img{width:128px;height:158px;border:1px solid #CCC;}
    </style>
    </head><body>
    <div id="img_1">
        <ul>
           <li><a href="#"><img src="home.png" /></a><br /><a  href="#">222222</a></li>
           <li><a href="#"><img src="link.png"/></a><br /><a  href="#">222222</a></li>
           <li><a href="#"><img src="email.png"  /></a><br /><a  href="#">222222</a></li>
           <li><a href="#"><img src="music.png" /></a><br /><a  href="#">222222</a></li>
           <li><a href="#"><img src="history.png"  /></a><br /><a  href="#">222222</a></li>
        </ul>
    </div>
    <script type="text/javascript">
    image.gd({
    td_id:"img_1", //最外层DIV的ID
    float:"left", //滚动方向left左方向,top向上,right向右,bottom向下
    sd:"5", //滚动的速度数值越大越慢
    });
    </script>
    </body>
    </html>
    这里是HTML的代码 IE 6 7 8 9还有 谷歌浏览器都没问题~!为什么 就是FF不循环呢~!实在不理解 找不到问题 求各位大大帮忙看看 问题出在哪里了!!!!!
      

  2.   

        $("img_2").style.float="left";
        $("img_3").style.float="left";
        $("img_4").style.float="left";
    IE下对应得是styleFloat,
    firefox,chorme,safari下对应的是cssFloat