在第一次onClick之后，动画不再在FF 23，IE 10中播放

时间：2014-02-06 03:10:42

标签： css internet-explorer firefox animation

我正在尝试使用css和javascript编写基本内容滑块。有一个php变量，但设置宽度。

在Chrome中，一切正常。您可以根据需要单击左侧，每次都能正确显示动画。单击右键，它正确向右移动。当您切换到Firefox 23或IE 10时，它会停止正常工作。

我可以解释它的最好方法，你点击左边，它会显示动画。再次单击左键，每次单击左后，超时最终会更改幻灯片。没有动画。奇怪的是，在任何时候你单击右键，它会在第一次显示正确的动画，然后再次，超时更改幻灯片，没有动画。你可以来回走动。将幻灯片1滑动到幻灯片2，显示动画。将幻灯片2滑动到幻灯片1，显示动画。

就像有一件事我想念。从一个方向切换到另一个方向是关键。它正在“重置”某些东西......？

感谢您的帮助，以下是代码，位置和示例。

你可以看到它： http://musicwhynot.com/slide.php 这是在chrome中工作。但是火狐和IE失败了。

的jsfiddle。它在任何浏览器中都不起作用，这是我第一次使用它，但至少这会破坏你的代码。这当然是减去任何PHP：http://jsfiddle.net/769we/

实际代码：

<?php $slide_width=800; ?>
<!DOCTYPE html>
<html>

<head>
<style>
    .sliding_div    {
        width:<?php echo $slide_width; ?>px;
        position:relative;

        animation-name: right-to-left;
        animation-duration: 1s;
        animation-timing-function: ease; 
        animation-delay: 0s;           
        animation-iteration-count: 1;  
        animation-play-state:paused;
        backface-visibility: hidden;

        -moz-animation-name: right-to-left;
        -moz-animation-duration: 1s;
        -moz-animation-timing-function: ease; 
        -moz-animation-delay: 0s;           
        -moz-animation-iteration-count: 1;  
        -moz-animation-play-state:paused;
        -moz-backface-visibility: hidden;

        -webkit-animation-name: right-to-left;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: ease; 
        -webkit-animation-delay: 0s;           
        -webkit-animation-iteration-count: 1;  
        -webkit-animation-play-state:paused;
        -webkit-backface-visibility: hidden;
    }

    @keyframes right-to-left {
        from {left:0px;}
        to {left:-<?php echo $slide_width; ?>px;}
    }

    @-webkit-keyframes right-to-left {
        from {left:0px;}
        to {left:-<?php echo $slide_width; ?>px;}
    }

    @-moz-keyframes right-to-left {
        from {left:0px;}
        to {left:-<?php echo $slide_width; ?>px;}
    }


    @keyframes left-to-right {
        from {left:0px;}
        to {left:<?php echo $slide_width; ?>px;}
    }

    @-webkit-keyframes left-to-right {
        from {left:0px;}
        to {left:<?php echo $slide_width; ?>px;}
    }

    @-moz-keyframes left-to-right {
        from {left:0px;}
        to {left:<?php echo $slide_width; ?>px;}
    }
</style>


</head>

<body style="background-color:grey;" onload="do_load();">
<center>

    <br />
    <input type="button" onclick="move_last_slide();" value="<-" />
    <input type="button" onclick="move_next_slide();" value="->" /><br />
    <span id="output"></span>
    <br /><br />


    <div style="overflow:hidden;width:<?php echo $slide_width; ?>px;height:400px;background-color:white;">
        <div class="sliding_div" id="my-div">
            <div id="div0" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:1;">
                <table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">0</td></tr></table>
            </div>

            <div id="div1" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;">
                <table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">1</td></tr></table>
            </div>

            <div id="div2" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;">
                <table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">2</td></tr></table>
            </div>

            <div id="div3" style="width:<?php echo $slide_width; ?>px;height:400px;position:absolute;top:0px;left:0px;display:inline-block;opacity:0;">
                <table width="100%" height="100%" border="1"><tr><td align="center" valign="middle">3</td></tr></table>
            </div>

        </div>
    </div>
</center>



<script language="javascript" type="text/javascript">
    var num_slides=3; // INCLUDES 0!

    var cur_slide=0;

    var last_slide;
    var next_slide;

    var in_motion=0;

    var slide_width = <?php echo $slide_width; ?>;

    function do_load() {
        change_slide(0)
    };

    function change_slide(new_slide_num) {
        cur_slide = new_slide_num;

        if ( cur_slide < 0 ) { cur_slide=num_slides; }
        if ( cur_slide > num_slides ) { cur_slide = 0; }


        last_slide = cur_slide - 1;
        if ( last_slide < 0 ) { last_slide=num_slides; }


        next_slide = cur_slide + 1;
        if ( next_slide > num_slides ) { next_slide = 0;    }

        document.getElementById("output").innerHTML = "cur_slide = " + cur_slide + ", num_slides = " + num_slides + ", next_slide = " + next_slide + ", last_slide = " + last_slide;
    };


    function move_next_slide() {
        if (in_motion==0) {

        for (var i=0;i<=num_slides;i++) { 
            document.getElementById("div" + i).style.opacity="0";
        }

            document.getElementById("div" + cur_slide).style.opacity="1";
            document.getElementById("div" + cur_slide).style.left = ("0px");

            document.getElementById("div" + next_slide).style.opacity="1";
            document.getElementById("div" + next_slide).style.left = (slide_width + "px");

            cur_slide++;
            change_slide(cur_slide);

            in_motion=1;

            document.getElementById("my-div").classList.remove("sliding_div");
            document.getElementById("my-div").offsetWidth = document.getElementById("my-div").offsetWidth;
            document.getElementById("my-div").classList.add("sliding_div");

            document.getElementById("my-div").style.webkitAnimationName="right-to-left";
            document.getElementById("my-div").style.mozAnimationName="right-to-left";
            document.getElementById("my-div").style.animationName="right-to-left";

            document.getElementById("my-div").style.animationPlayState="running";
            document.getElementById("my-div").style.webkitAnimationPlayState="running";
            document.getElementById("my-div").style.mozAnimationPlayState="running";

            setTimeout("move_done()", 1000);
        }
    };

    function move_last_slide() {
        if (in_motion==0) {

        for (var i=0;i<=num_slides;i++) { 
            document.getElementById("div" + i).style.opacity="0";
        }

            document.getElementById("div" + cur_slide).style.opacity="1";
            document.getElementById("div" + cur_slide).style.left = ("0px");

            document.getElementById("div" + last_slide).style.opacity="1";
            document.getElementById("div" + last_slide).style.left = "-" + slide_width + "px";

            cur_slide--;
            change_slide(cur_slide);

            in_motion=1;


            document.getElementById("my-div").classList.remove("sliding_div");
            document.getElementById("my-div").offsetWidth = document.getElementById("my-div").offsetWidth;
            document.getElementById("my-div").classList.add("sliding_div");

            document.getElementById("my-div").style.webkitAnimationName="left-to-right";
            document.getElementById("my-div").style.mozAnimationName="left-to-right";
            document.getElementById("my-div").style.animationName="left-to-right";

            document.getElementById("my-div").style.animationPlayState="running";
            document.getElementById("my-div").style.webkitAnimationPlayState="running";
            document.getElementById("my-div").style.mozAnimationPlayState="running";

            setTimeout("move_done()", 1000);
        }
    };


    function move_done() {

        for (var i=0;i<=num_slides;i++) { 
            document.getElementById("div" + i).style.opacity="0";
        }

        document.getElementById("div" + cur_slide).style.opacity="1";
        document.getElementById("div" + cur_slide).style.left = "0px";

        in_motion="0";
    };

</script>



</body>

</html>

0 个答案:

没有答案
相关问题
最新问题