Javascript jquery动画和浮动不浮动_Javascript_Jquery_Jquery Animate_Css Float

Javascript jquery动画和浮动不浮动

javascript jquery

Javascript jquery动画和浮动不浮动,javascript,jquery,jquery-animate,css-float,Javascript,Jquery,Jquery Animate,Css Float,我有两张照片，我想粘在一起，因为没有更好的术语。当左边的图像在屏幕外动画化时，右边的图像只是静止不动。我试着用位置：相对；在右边图像的CSS中，甚至尝试通过添加到javascript（参见js文件中的注释）来设置动画，但没有改变任何内容 HTML文件 <!DOCTYPE HTML> <HTML> <HEAD> <link rel="stylesheet" type="text/css" href="slidetest01.css"> <scr

我有两张照片，我想粘在一起，因为没有更好的术语。当左边的图像在屏幕外动画化时，右边的图像只是静止不动。我试着用位置：相对；在右边图像的CSS中，甚至尝试通过添加到javascript（参见js文件中的注释）来设置动画，但没有改变任何内容

HTML文件

<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="slidetest01.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
<script src="./javascripts/picslider01a.js"></script>
</HEAD>

<BODY onload="picrotate()">
<div id="slideshow"><img id="picshown" src="./pix/mtn01.jpg">
<img id="pichidden" src="./pix/mtn02.jpg"></div>
</BODY>
</HTML>

javascript文件

function picrotate () {
var picts = new Array();
picts[0] = "./pix/mtn01.jpg";
picts[1] = "./pix/mtn02.jpg";
picts[2] = "./pix/mtn03.jpg";
picts[3] = "./pix/mtn04.jpg";
picts[4] = "./pix/mtn05.jpg";

var count = 2;

function rotator() {

$("#picshown").animate({left: "-600px"});
//Tried adding $("#pichidden").animate({left: "0px"}); here but did not work
//Need to delay since the rest triggers immediately after transition starts.
setTimeout(function () {    //1 second should be enough time for the slide.

count = (count+1)%5;

var discard = document.getElementById("picshown");  //removes old picture
discard.parentNode.removeChild(discard);

document.getElementById("pichidden").setAttribute("id", "picshown");    //makes current picture the active one

ith = document.createElement("img");    //create a new image
ith.id = "pichidden";
ith.src = picts[count];

$("#slideshow").append(ith);//Append it to the slideshow
}, 1000);

}   //end rotator

setInterval(rotator, 2000);
}   // end picrotate

使用

marginLeft:“-600px”

而不是

left

。不要害怕使用

var picts=[”/pix/mtn01.jpg“，”/pix/mtn02.jpg“，”/pix/mtn03.jpg“]

；不要害怕使用

count=（count+1）%picts.length我的意思是，使您的代码更加模块化，将来更容易修改。使用JS计算内容。$（“#幻灯片”）
在循环中是个坏主意，将选择器缓存在变量中，然后改用该变量！为什么要使用document.getElementById（“picShowed”）何时清楚地使用jQuery？
function picrotate () {
var picts = new Array();
picts[0] = "./pix/mtn01.jpg";
picts[1] = "./pix/mtn02.jpg";
picts[2] = "./pix/mtn03.jpg";
picts[3] = "./pix/mtn04.jpg";
picts[4] = "./pix/mtn05.jpg";

var count = 2;

function rotator() {

$("#picshown").animate({left: "-600px"});
//Tried adding $("#pichidden").animate({left: "0px"}); here but did not work
//Need to delay since the rest triggers immediately after transition starts.
setTimeout(function () {    //1 second should be enough time for the slide.

count = (count+1)%5;

var discard = document.getElementById("picshown");  //removes old picture
discard.parentNode.removeChild(discard);

document.getElementById("pichidden").setAttribute("id", "picshown");    //makes current picture the active one

ith = document.createElement("img");    //create a new image
ith.id = "pichidden";
ith.src = picts[count];

$("#slideshow").append(ith);//Append it to the slideshow
}, 1000);

}   //end rotator

setInterval(rotator, 2000);
}   // end picrotate