急！求带按钮的图片无缝滚动代码

求带按钮的图片无缝滚动代码，图片可以自动横向滚动，鼠标放上去就暂停，点击前后的按钮可以向前向后翻图片，最好是IE7。IE8，火狐都兼容的；谢谢

解决方案 »

  1.   

    带按钮的图片？是不是<input type="image">?
      

  2.   

    其实这个完全可以自己来做，控制速度，有风无缝那你也完全可以根据marginleft来控制
      

  3.   

    这种东西很简单，思路就是用定时器不断改变容器的位置，结尾和开头稍加处理。可参考这里
    http://zhidao.baidu.com/question/112870658.html
      

  4.   

    http://wenku.baidu.com/view/f6782b0102020740be1e9b5e.html
      

  5.   

    <script language="javascript">   
    function marquee1(){   
    document.write("<div style='width:100%;overflow:hidden;' id=marquee onmouseover=clearInterval(repeat) onmouseout=repeat=setInterval(scrollMarquee,1)>")   
    }function marquee2(){   
    document.write("</div>");  
    marquee.childNodes[0].align = 'left';   if(marquee.childNodes[0].offsetWidth > marquee.offsetWidth) {  
    marquee.appendChild(marquee.childNodes[0].cloneNode(true));  
    }else {  
    for(var i = 0; i < Math.round(marquee.offsetWidth/marquee.childNodes[0].offsetWidth) + 1; i++)
    marquee.appendChild(marquee.childNodes[0].cloneNode(true));
    }
    repeat = setInterval(scrollMarquee, 1);
    }function scrollMarquee() {  
    if(marquee.scrollLeft < marquee.childNodes[0].offsetWidth)marquee.scrollLeft++;  
    else marquee.scrollLeft = 0;  
    }marquee1();
    </script>  <table width="300" border="0" cellspacing="0" cellpadding="0">  
    <tr>  
    <td align="center"><img src="http://www.baidu.com/img/baidu_logo.gif" width="100" height="100" border="3"></td>  
    <td align="center"><img src="http://www.baidu.com/img/baidu_logo.gif" width="100" height="100" border="3"></td>  
    <td align="center"><img src="http://www.baidu.com/img/baidu_logo.gif" width="100" height="100" border="3"></td>  
    </tr>  
    </table>  <script language="javascript">marquee2();</script>
      

  6.   

    给楼主一个按照上面例子改造的demo,有按钮的：
    <!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>
    <style type="text/css">
    <!--
    #demo{
    background:#FFF;
    overflow:hidden;
    border:1px dashed #CCC;
    width:500px;
    float:left;
    }
    #demo img{
    border:3px solid #F2F2F2;
    }
    #indemo{
    float:left;
    width:800%;
    }
    #demo1{
    float:left;
    }
    #demo2{
    float:left;
    }
    #leftDir{
    width:20px;
    height:40px;
    padding:8px 0px;
    text-align:center;
    float:left;
    cursor:pointer;
    }
    #rightDir{
    width:20px;
    height:40px;
    padding:8px 0px;
    text-align:center;
    float:left;
    cursor:pointer;
    }
    -->
    </style>
    </head><body>
    <div id="leftDir"><<</div>
    <div id="demo">
        <div id="indemo">
            <div id="demo1">
                <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
                <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
                <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
                <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
                <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
                <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
            </div>
            <div id="demo2"></div>
        </div>
    </div>
    <div id="rightDir">>></div>
    <script type="text/javascript">
    <!--
    var speed = 10;
    var direction="left";
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    var leftDir = document.getElementById("leftDir");
    var rightDir = document.getElementById("rightDir");
    tab2.innerHTML = tab1.innerHTML;
    function marquee(){
        switch(direction){
            case "left":
                if(tab2.offsetWidth - tab.scrollLeft <= 0){
                    tab.scrollLeft -= tab1.offsetWidth;
                }
                else{
                    tab.scrollLeft++;
                }
            break;
            case "right":
                if(tab.scrollLeft <= 0){
                    tab.scrollLeft += tab2.offsetWidth;
                }
                else{
                    tab.scrollLeft--;
                }
            break;
        }
    }
    function changeDirection(dir){
       direction = dir;
    }
    var timer = setInterval(marquee,speed);
    tab.onmouseover = function(){clearInterval(timer);};
    tab.onmouseout = function(){timer = setInterval(marquee,speed);};
    leftDir.onclick = function(){changeDirection("left");};
    rightDir.onclick = function(){changeDirection("right");};
    -->
    </script>
    </body>
    </html>