1

水平方向にスクロールする画像ギャラリーに問題があります。スクロールするには、javascript の scrollLeft メソッドを使用し、タイマー (setTimeout) で関数を呼び出します。スクロールバーの最後に到達したら、最初に設定しました。

シングルコアの AMD Athlon 64 3000+ で問題なく動作します。(windows xp FF15 & IE8) また、600MHz で動作する pentium m を搭載した古いラップトップでも動作します。(windows xp FF15) 私のクアッドコアではアイスクリームのように滑らかですが、ボスのハイエンドマシンでは途切れ途切れで遅いです。(したがって、それは開発者のせいです:D。私はそれを修正する必要があります。) - しかし、どのように? また、Intel T1300では少し高速になる可能性があります（なんてひどいCPUでしょう）

ボスのリグに何か問題があると思いますが、スクリプトを一般的に高速化する方法のヒントをいただければ幸いです。

しかし、いくつかの奇妙な点があります: Firefox 14 & 15 および IE8 で動作します。しかし、IE9ではスクロールが非常に遅くなり、使用できなくなります。また、Chrome では onmouseover イベントの後に再開されず、ギャラリーが一時停止します。Chromeが認識しないため、Onmouseoutは起動されませんか?

ここでフィドルを作成しました: 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