1

我的水平滚动图片库有一些问题。要滚动它，我使用 javascript scrollLeft 方法并使用计时器 (setTimeout) 调用该函数。到达滚动条的末尾后，我将其设置为开头。

它在单核 AMD Athlon 64 3000+ 上运行良好。(windows xp FF15 & IE8) 它也可以在一台运行速度为 600 兆赫的奔腾 m 的旧笔记本电脑上工作。(windows xp FF15) 在我的四核上它像冰淇淋一样光滑，但在我老板的高端机器上它是波涛汹涌和缓慢的。（因此这是开发人员的错：D，我必须修复它。） - 但是如何？在 Intel T1300 上它也可能会更快一些（多么糟糕的 CPU）

我想我的老板装备有一些遗漏，但我会很感激提示如何使我的脚本通常更快。

但还有一些额外的奇怪之处：它适用于 Firefox 14 和 15 以及 IE8。但是 IE9 的滚动速度非常慢，无法使用。而对于 Chrome，它不会在 onmouseover 事件之后恢复，这会暂停画廊。Onmouseout 没有被触发，因为 chrome 无法识别它？

我在这里做了一个小提琴：http: //jsfiddle.net/cQf44/7/ （在原始代码中，图像另外嵌套在一个DIV中，我可能会改变）

这是我为这个问题做的例子。

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
            <style type="text/css">
        html
    {
        height:100%;
    }

    body
    {
        height:98%;
        background-color: #FFF9E5;    
        padding: 0px;                                
    }   

#wrapper
{
    margin:auto;
    padding: 0;
}
#outer
{
    padding: 0;
    background-color: #FFF9E5;
}

#container
{
    margin: 0 auto;   
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    width:60%;
    background-color: #867F27;
    padding-right:1%;
    padding-left:1%;
}

#view
{   
    height: 180px;
    white-space: nowrap;
    line-height: 0;
    overflow-x: auto;
    margin: 0 auto;
    vertical-align: middle;
    width:800px;    /*with a fixed width it works very nice*/
    max-width: 75%; /*lets the gallery shrink on resize of the browser*/
}    

img
{
        display: inline-block;
}
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="outer">
            <div id="container">
                <div id="view" onmouseover="javascript:stop_scroll()" onmouseleave="javascript:start_scroll()">
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                    <img src="http://lorempixel.com/205/154/"/>
                </div>
            </div>
        </div>
    </div>
<script type="text/javascript">
var gallery = document.getElementById('view');
var scroll_timer;

autoscroll();
function autoscroll()
{
    scroll_timer=setTimeout("autoscroll()",10);    
    var max_scroll = parseInt(gallery.scrollWidth)-parseInt(gallery.clientWidth);
    gallery.scrollLeft += 1;
    if(gallery.scrollLeft == max_scroll)
    {
        gallery.scrollLeft = 0;
    }
}

function stop_scroll()
{
    clearTimeout(scroll_timer);
}

function start_scroll()
{
    scroll_timer=setTimeout("autoscroll()",10);
}

</script>
</body>
</html>

一如既往地提前感谢，祝你有美好的一天。

4

0 回答 0