将一个div滑动到另一个div内的效果

Question

将一个div滑动到另一个div内的效果

javascripthtml

3

我正在尝试创建滑动图片效果: 在线演示链接文本.

问题在于，如果您快速随机地点击按钮而不等待动画完成，会导致出现无法预测的结果，甚至停止功能工作。(有一次在两幅图像中间停止了...)

如何使其无错误地工作呢？我知道有其他工具用于幻灯片滑动，如jquery和更改位置属性而不是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>

- mariki

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bobince · Answer 1

在开始新动画之前，您需要停止先前的动画。在开头设置：

var scrollIntervalID= null;

然后在 function Scroll 的开头添加：

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

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

- keithics · Answer 2

这只是一个快速修复，我不是 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>

- o.k.w · Answer 3

我强烈建议您使用像jQuery这样的框架，但如果您坚持使用当前版本，则必须注意在动画期间发生的情况。

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