我正在尝试使用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>