制作方法: 
    
    在页面<body>~</body>相关位置加入代码: 
<iframe frameborder=no height=100 marginheight=0 marginwidth=0 name=mq scrolling=no src="scrollimg-pic.htm" width="100%"></iframe>
<iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=mq scrolling=no src="make-scroll.htm" width=0></iframe>
新建scrollimg-pic.htm页面,插入相同大小的图片若干张。为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次。类似于 scrollimg-pic.htm 文件。
  在每一张的图片上,添加特效:
  停顿效果代码:onmouseout=javascript:parent.frames[1].startscroll(); 
onmouseover=javascript:parent.frames[1].stopscroll()"  
    手形效果:style="cursor:hand 
    都添加至<img src="XXX.jpg">。
  也可以加入图片的超级链接!  
    
    再新建make-scroll.htm页面文件,该文件为控制图片滚动的页面。在<head>~</head>中,加入代码: 
<SCRIPT language=JavaScript>
<!--//
var x = 0;
var y = 0;
var limdex = 600;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;function scrollit(destination) {
step = 2;
dest = destination;
if (x<dest & x < limdex){
while (x<dest) {
step += (step / 7);
x += step;
parent.frames[0].scroll(x,0);
}  
                        // top.main.scroll(dest,0);
if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x > dest)  {
while (x>dest) {
step += (step / 7);
if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
else break;
}
if(dest >= 0) { parent.frames[0].scroll(dest,0); }
x = dest;
}
if (x<1) { parent.frames[0].scroll(1,0); x=1 }
if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
x = dest;
}function scrollnow() {
                if (on){
                if (x < limdex & x >= 0 ) {              
                                parent.frames[0].scroll(x,0);
                            
                        x = x + 1;
                        
                        setTimeout('scrollnow()', 8);
        
                }
                else if (x < 0) {
                
                        x = limdex;
                        scrollnow();
                }
            else {
                
                x=0;
                scrollnow();
                }
                }}// *********************************
// 去掉原来的stopscroll()
function stopscroll() {
        if (on){
        on = false;
        }
        else {
        on = true;
        scrollnow();
        }
        
}
function startscroll() { on = true; scrollnow(); }
function stop_start() { 
if (on){ on = false;}else { on = true;scrollnow();}
}scrollnow();//***********************************//--></SCRIPT>
注意,代码中:var limdex=600; 数字的取值计算为:单张图片的宽度像素 * 使用图片张数 
    以我们的滚动效果来计算,使用的单张图片宽度为120px,共使用5张,所以var limdex的数字值为600。 
    连续滚动的图片的特效就制作完成了! 

解决方案 »

  1.   

    在代码里合适位置加上window.status=demo.scrollLeft+"|"+任何你想知道当前值的变量
    运行,看下状态栏变化,哪些变量值不符合判断条件。
    自己调下就知道了,祝你好运。
      

  2.   

    看一下我的js吧:
    function left(obj)//触发事件,obj为后台传来的参数
    {     
              setInterval(function(){roll(obj);},30);
    }function roll(obj)
    {
    debugger
         if((typeof(obj) != "undefined"))
         {
                var s = obj;
                var demo = document.getElementById("demo"+s);
                var demo1 = document.getElementById("demo1"+s);
                var demo2 = document.getElementById("demo2"+s);
                demo2.innerHTML=demo1.innerHTML;
                Marquee(demo,demo1,demo2);//这里的demo,demo1,demo2都可以取到
         }
    }function Marquee(demo,demo1,demo2)
    {
    debugger  //只要触发事件,就会无限进入这个方法,不知道什么原因!!
        if(demo2.offsetWidth-demo.scrollLeft<=0)
        {
            demo.scrollLeft-=demo1.offsetWidth
        }
        else
        {
            demo.scrollLeft++;//这里赋值不起作用,demo.scrollLeft始终为0!!!
        }
    }
      

  3.   

    window.status=demo.scrollLeft+"|"+任何你想知道当前值的变量
    ==============================================
    结果是0|0, 郁闷两天了!~~
      

  4.   

    参考:
    http://www.jxxg.com/blog/dh20156_369/article.asp?id=5
      

  5.   

    不管怎么写,demo.scrollLeft始终就为0,在网上查了, 也没什么好方法,是不是我别的地方写的有问题呢?
      

  6.   

    只要触发事件,就会无限进入这个方法,
    你用的是setInterval,这个是循环触发,改用延时触发setTimeout
    demo.scrollLeft++;//
    scrollLeft:This property is always 0 for objects that do not have scroll bars//
    没有滚动条这个值始终是0
      

  7.   

    补充下,上面是说没有滚动条的对象不能用这个值,你把图片镶嵌到span里试试
      

  8.   

    TO:holycycle() 
    先谢谢你!
    “你把图片镶嵌到span里试试”
    ==================================
    还是0,是不是我把div的宽度或者其他宽度的时候设置的不恰当呢,有这个可能吗?
      

  9.   

    你可以用alert检测下demo.scrollLeft++;语句是否执行了,如果还不行,下面是网上一高手写的无缝滚动,可以参考下
    <div id="mq" class="dhMarquee" onmouseover="iScrollAmount=0" onmouseout="iScrollAmount=1"> 
    <span id="mqdemo" class="mqdemo"> 
    <a href="javascript:alert('1')">月圆之夜</a> 
    <a href="javascript:alert('2')">紫禁之颠</a> 
    <a href="javascript:alert('3')">西门吹雪</a> 
    <a href="javascript:alert('4')">天外飞仙</a> 
    </span> 
    </div> 
    <script language="javascript"> 
    var speed = 90; 
    //判断浏览器类型
    var isMSIE = (navigator.appName == "Microsoft Internet Explorer");
    //滚动对象 
    var oMarquee = document.getElementById("mq");
    //内容对象 
    var omqdemo = document.getElementById("mqdemo");
    var w = oMarquee.offsetWidth;
    var odl = omqdemo.offsetWidth;
    var x = parseInt(w/odl)+1;
    for(var i=0;i<x;i++){
     var o = omqdemo.cloneNode(true);
     oMarquee.appendChild(o);
    }
    var iScrollAmount = 1
    function scroll(){
     oMarquee.scrollLeft += iScrollAmount;
     var ol = oMarquee.scrollLeft;
     //IE和FF的位置有不同
     if(isMSIE){
      if(odl-ol<=0){
       oMarquee.scrollLeft = 0;
      }
     }else{
      if(odl-ol<=-10){
       oMarquee.scrollLeft = 2;
      }
     }
    }
    var MyMar = window.setInterval(scroll,speed);
      

  10.   

    <style>
    a {font-size:12px;} 
    .dhMarquee {width:500px;height:30px;line-height:30px;text-align:left;margin:0px;padding:0px;border:1px solid #000;overflow:hidden;white-space:nowrap;} 
    .mqdemo {margin:0px;padding:0px;border:0px;}
    </style>
      

  11.   

    我测试了,demo.scrollLeft++;执行,这个我也看了,梅大师写的吗,可对我这就不起左右,晕死,郁闷,都花了好多天了!!
      

  12.   

    好,我把我的代码贴出来!
    for (int i = 0; i < rowN; i++)
    {
          s.Append("<table border=\"0\" cellpadding=\"0\" cellspace=\"0\" width=\"100%\"><tr>");
          s.Append("<td valign=\"middle\" runat=\"server\" id=\"left11\"  height=\"25\" width=\"10px\"><img id=\"ip1\" onmouseout=\"javascript:left1(" + i.ToString() + ");\" onmouseover=\"javascript:left(" + i.ToString() + ");\" src=\"images/result/arrow_left.gif\" runat=\"server\" style=\"cursor: hand\"></td>");
          s.Append("<td align=\"left\" valign=\"middle\" style=\"width: 520px\"><div id=\"demo" + i.ToString() + "\" style=\"overflow: hidden; height: 25px; width: 520px;\"><table border=\"0\" cellpadding=\"0\" cellspace=\"0\"><tr><td id=\"demo1" + i.ToString() + "\" valign=\"top\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" height=\"24\"><tr><td>");
          s.Append("<span>");
          s.Append("<img/><img/><img/>");
          s.Append("</span>");
          s.Append("</td></tr></table></td><td id=\"demo2" + i.ToString() + "\" valign=\"top\" runat=\"server\"></td></tr></table></div></td>");
          s.Append("<td valign=\"middle\" runat=\"server\" id=\"right11\"  height=\"25\" width=\"10px\"><img id=\"ip2\" onmouseout=\"javascript:right1(" + i.ToString() + ");\" onmouseover=\"javascript:right(" + i.ToString() + ");\" src=\"images/result/arrow_right.gif\" runat=\"server\" style=\"cursor: hand\"></td></tr></table>");
    }
    JS在上面贴过了
      

  13.   

    //还是滚动条的问题,你要确保内容宽度超出Div的宽,以产生滚动条,而且不能换行
    //把I'm a bug 那段替换成图片就行了
    s = [];
    for (var i = 0; i < 1; i++)
    {
          s.push("<table border=\"0\" cellpadding=\"0\" cellspace=\"0\" width=\"600px\"><tr>");
          s.push("<td align=\"left\" valign=\"middle\" style=\"width: 520px\"><div id=\"demo" + i + "\" style=\"white-space:nowrap;overflow: hidden; height: 25px; width: 500px;background:gray\"><table border=\"0\" cellpadding=\"0\" cellspace=\"0\"><tr><td id=\"demo1" + i + "\" valign=\"top\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" height=\"24\"><tr><td>");
          s.push("I am a bugaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
          s.push("</td></tr></table></td><td id=\"demo2" + i + "\" valign=\"top\" ></td></tr></table></div></td>");
          s.push("<td valign=\"middle\"  id=\"right11\"  height=\"25\" width=\"10px\"><div id=\"ip2\"  onclick=\"javascript:left(" + i + ");\" style=\"background:green\"  >a</div></td></tr></table>");
    }
    document.body.innerHTML = s.join(" ");
    function left(obj)//触发事件,obj为后台传来的参数
    {     
              setInterval(function(){roll(obj);},30);
    } function roll(obj)
    {
    //debugger
         if((typeof(obj) != "undefined"))
         {
                var s = obj;
                var demo = document.getElementById("demo"+s);
                var demo1 = document.getElementById("demo1"+s);
                var demo2 = document.getElementById("demo2"+s);
                demo2.innerHTML=demo1.innerHTML;
                Marquee(demo,demo1,demo2);//这里的demo,demo1,demo2都可以取到
         }
    } function Marquee(demo,demo1,demo2)
    {
    //debugger  //只要触发事件,就会无限进入这个方法,不知道什么原因!!
        if(demo2.offsetWidth-demo.scrollLeft<=0)
        {
            demo.scrollLeft-=demo1.offsetWidth
        }
        else
        {
    demo.scrollLeft++;//这里赋值不起作用,demo.scrollLeft始终为0
        }
    }
      

  14.   

    你那个循环控制也有问题,估计会把浏览器耗死,你要用onmouseover 去关setInterval的句柄才行,不然就象梅花雪那样,只开一个定时器
      

  15.   

    把要滚动的东西组合成字符串,然后设置为mqdemo的innerHTML,因为mqdemo是SPAN元素,所以请尽量直接在里边插入内容,如文字,链接,图片!
    小小的申明一下,holycycle() 贴的那段正是偶写的代码! :)