Question

我正在尝试创建滑动图像效果：在线演示link text。

问题是当您在按钮上快速随机点击而不是等待动画完成时会导致不可预测的结果，甚至停止使用该功能。（一旦它停在2张图片的中间......）

如何在没有错误的情况下使其正常工作？我知道有一些其他工具可以像jquery一样滑动，其他方法如更改position属性而不是scrollLeft属性。但是我想用scrollLeft这样做，如果可能的话。

守则：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">
            body
            {
                padding:0px;
                margin:0px;
            }
            #imageContainer
            { 
                width: 500px;
                position: relative;             
            }
            #div
             {              
                overflow: hidden;
                white-space: nowrap;                            
            }

            #div img {
                cursor: pointer;
                vertical-align: bottom;
                width: 500px;
                padding:0px;
                margin:0px;
                display:inline;
            }


        </style>
        <script type="text/javascript">                        
            var scrollIntervalID;
            var currentIndex=0;                                

            function Scroll(ind){

                var dir = ind ==currentIndex?0:ind<currentIndex?-1:1;
                var steps = Math.abs(ind-currentIndex);

                scrollIntervalID = setInterval(function(){
                    var i=(steps*10)-1;
                    return function(){
                        if (i <= 0) 
                            clearInterval(scrollIntervalID);
                        var elm = document.getElementById("div");                   
                        elm.scrollLeft +=dir * 50;
                        i--;   

                        document.getElementById("span").innerHTML=elm.scrollLeft;

                    }
                }(), 15);
                currentIndex=ind;
            }            

        </script>
    </head>
    <body>
        <div id="imageContainer">
            <div id="div">
                <img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/>
            </div>          
        </div>

        <div>
            <input type="button" value="1" onclick="Scroll(0);"/>
            <input type="button" value="2" onclick="Scroll(1);"/>
            <input type="button" value="3" onclick="Scroll(2);"/>
            <input type="button" value="4" onclick="Scroll(3);"/>
        </div>
        <span id="span"></span>
    </body>
</html>

Answer 1

我会建议你使用像jQuery这样的框架，但是如果你坚持使用当前版本，你必须处理动画期间发生的场景。

您有scrollIntervalID，但未在该功能范围之外使用。您可以尝试在上一个滑动动画正在进行时使用clearInterval清除间隔计时器，并在执行下一个动画之前将位置提前到预期的位置。

Answer 2

您需要在开始新动画之前停止上一个动画。首先，设置：

var scrollIntervalID= null;

然后在function Scroll开头添加：

if (scrollIntervalID!==null) {
    clearInterval(scrollIntervalID);
    scrollIntervalID= null;
}

您还希望将动画的起始位置基于scrollLeft的当前值，而不是尝试记住currentIndex。

Answer 3

这是一个快速修复，我不是一个JavaScript专家。但它的工作原理基于我的快速测试

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
        body
        {
            padding:0px;
            margin:0px;
        }
        #imageContainer
        { 
            width: 500px;
            position: relative;             
        }
        #div
         {              
            overflow: hidden;
            white-space: nowrap;                            
        }

        #div img {
            cursor: pointer;
            vertical-align: bottom;
            width: 500px;
            padding:0px;
            margin:0px;
            display:inline;
        }


    </style>
    <script type="text/javascript">                        
        var scrollIntervalID;
        var currentIndex=0;                                
        var start = true;
        function Scroll(ind){
            if(start){
            var dir = ind ==currentIndex?0:ind<currentIndex?-1:1;
            var steps = Math.abs(ind-currentIndex);

            scrollIntervalID = setInterval(function(){
            start = false;
                var i=(steps*10)-1;
                return function(){
                    if (i <= 0) 
                        clearInterval(scrollIntervalID);
                    var elm = document.getElementById("div");                   
                    elm.scrollLeft +=dir * 50;
                    i--;   

                    document.getElementById("span").innerHTML=elm.scrollLeft;

                }
            }(), 0);
            currentIndex=ind;
            start = true;
            }
        }            

    </script>
</head>
<body>
    <div id="imageContainer">
        <div id="div">
            <img id="image1" src="Images/pic1.jpg" width="500px"/><img id="image2" src="Images/pic2.jpg" width="500px"/><img id="image3" src="Images/pic3.jpg" width="500px"/><img id="image4" src="Images/pic4.jpg" width="500px"/>
        </div>          
    </div>

    <div>
        <input type="button" value="1" onclick="Scroll(0);"/>
        <input type="button" value="2" onclick="Scroll(1);"/>
        <input type="button" value="3" onclick="Scroll(2);"/>
        <input type="button" value="4" onclick="Scroll(3);"/>
    </div>
    <span id="span"></span>
</body>

在另一个div效果中滑动div

3 个答案: