关于setinterval()的问题

我现在做图片滚动的效果，程序正确运行。但是就是图片滚动得很不自然，总是有停顿的感觉，在火狐下感觉较为平滑，IE下严重的停顿感觉。请问高手如何解决？有人说需要设置一个属性，但是找偏了都没有找到设置那个属性。希望高手解决！
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ScrollImg.aspx.cs" Inherits="ScrollImg" %><!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 runat="server">
    <title></title>
    <style type="text/css">
    a{float:left;border:0px;}
    img{height:80px;border:0px;}
    </style>
    <script type="text/javascript">        $E = function(el) {
            return document.getElementById(el);
        }
        window.onload = function() {
            // 动态加载图片列表
            /*var htmls = [];
            for (var i = 1; i < 9; i++) {
                htmls.push('<a href="#"><img src="Img/' + i + '.jpg" /></a>');
            }
            $E("imgs").innerHTML = htmls.join("");*/            $E("imgs").innerHTML += imgs.innerHTML;
            $E("imgs").scrollLeft = 0;            var images = document.getElementsByTagName("img"),
                w = 0;
            for (var i = 0; i < images.length; i++) {
                w += parseInt(images[i].offsetWidth);
            }
            $E("imgs").style.width = w + "px";            window.setInterval(scrollImg, 1);
        }        function scrollImg() {
            if ($E("imgList").scrollLeft > $E("imgs").offsetWidth / 2)
                $E("imgList").scrollLeft = 0;
            else
                $E("imgList").scrollLeft++;            $E("dd").innerHTML = $E("imgList").scrollLeft;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="imgList" style="width:600px; height:80px; overflow:hidden;">
        <div id="imgs">
            <a href="#"><img src="Img/1.jpg" /></a>
            <a href="#"><img src="Img/2.jpg" /></a>
            <a href="#"><img src="Img/3.jpg" /></a>
            <a href="#"><img src="Img/4.jpg" /></a>
            <a href="#"><img src="Img/5.jpg" /></a>
            <a href="#"><img src="Img/6.jpg" /></a>
            <a href="#"><img src="Img/7.jpg" /></a>
            <a href="#"><img src="Img/8.jpg" /></a>
        </div>
    </div>
    <div id="dd"></div>
    </form>
</body>
</html>

解决方案 »

  1.   

    $E确实让代码简洁不少，但是考虑到你每次都遍历DOM对象，是否可以考虑一次获取将DOM对象赋给一个变量，这样就可能会有那么一点影响。 
    我在IE9速度可以接受
    不过我很不理解，你这代码在FF下可以运行？
      

  2.   

    window.setInterval(scrollImg, 1);
    上面的1改成19
     $E("imgList").scrollLeft++;
    ++改成+=3
    ------------------------------
    “微软箱”这个工具软件不错
      

  3.   

    浏览器对于JS的运行性能是有差别的。新版IE有所改进，在这之前的IE和FF及CHROME等比起来，JS执行的确效果要差。我现在用IE8，运行效果还可以，看不出有什么停顿。
    另外，楼上把我想说的说了。时间设得太小，就算电脑能反映过来，人眼也反应不过来，所以没什么意义，改大点好些。
    至于++，倒可以不变，没什么问题。
      

  4.   

    IE的JS能力比FF,chrome就是差一点。之前google首页的一个3维碳60球在chrome滚动很流畅，在ie上就很卡。
      

  5.   

    这段代码就可以了，要是提高的话，我也只知道向1＃的方法，而且你也应该把$E("imgList")缓存起来，因为你这段代码调用太频繁了，还是有提高的！FF上能运行！
      

  6.   

    常用的dom元素保存其实可以减少查找元素的时间
    单个人感觉   这个问题还是在页面的repaint\reflow每次改变img的位置都会产生reflow 这个在ie下是很耗资源的所以更倾向于2楼的方法   找个临界点 让reflow 的次数降低 但是又不会台印象视觉效果关于repaint\reflow的一些介绍http://blog.csdn.net/baiduforum/archive/2010/03/25/5415527.aspx
      

  7.   

    问题解决了
    1、IE本来执行效率有关
    2、图片太大，在滚动时文件流太大，改变的时候延迟（暂且这样说）太高把图片尺寸像素压缩小之后效果明显提高，因为图片质量太高了（一般都是4-6M）所以导致了停顿效果。