これを使用して、スライド ショー内で div を移動しています。問題は、各画像のキャプションが同じ場所 (各 div) から始まる各画像の左から右に移動する必要があることです。このコードを使用すると、div は必要に応じて移動しますが、次の div は最後の div が配置されたポイントから移動します。
$("#elementId").animate({
marginLeft: "-=100"
}, 1000, function() {
//Complete
}
);
念のため、説明を難しくしています。
スライドショーがあり、各画像がフェードインし、1秒後に各画像の上にテキストが表示されるdivが表示され、divは左から右に移動する必要があります。ただし、上記のコードを使用すると、div が移動しますが、次の画像がフェードインするとすぐに、div は前の div があった最後の位置から移動します。
div を 0 または元の位置から再び「移動」させるにはどうすればよいですか?
リクエストされたコードの編集:
<script type="text/javascript">
// Speed of the automatic slideshow
var slideshowSpeed = 6000;
// Variable to store the images we need to set as background
// which also includes some text and url's.
var photos = [ {
"title" : "First Tag line :",
"image" : "/images/chrysanthemum-266x200.jpg",
"url" : "http://www.gyms-ireland.com",
"firstline" : "First Tag line :",
"secondline" : "Second Tag line"
}, {
"title" : "Some text",
"image" : "/images/tulips-oop-ll-266x200.jpg",
"url" : "http://www.gyms-ireland.com",
"firstline" : "Some text",
"secondline" : "Alternative text"
}, {
"title" : "Npthing Here",
"image" : "/images/koala-266x200.jpg",
"url" : "http://www.gyms-ireland.com",
"firstline" : "Npthing Here",
"secondline" : "Also nothing here",
}, {
"title" : "Office Appartments",
"image" : "/images/work.jpg",
"url" : "http://www.sxc.hu/photo/1265695",
"firstline" : "Or still busy at",
"secondline" : "work?"
}
];
jQuery(document).ready(function() {
// Backwards navigation
jQuery("#back").click(function() {
stopAnimation();
navigate("back");
});
// Forward navigation
jQuery("#next").click(function() {
stopAnimation();
navigate("next");
});
var interval;
jQuery("#control").toggle(function(){
stopAnimation();
}, function() {
// Change the background image to "pause"
jQuery(this).css({ "background-image" : "url(images/btn_pause.png)" });
// Show the next image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});
var activeContainer = 1;
var currentImg = 0;
var animating = false;
var navigate = function(direction) {
// Check if no animation is running. If it is, prevent the action
if(animating) {
return;
}
// Check which current image we need to show
if(direction == "next") {
currentImg++;
if(currentImg == photos.length + 1) {
currentImg = 1;
}
} else {
currentImg--;
if(currentImg == 0) {
currentImg = photos.length;
}
}
// Check which container we need to use
var currentContainer = activeContainer;
if(activeContainer == 1) {
activeContainer = 2;
} else {
activeContainer = 1;
}
showImage(photos[currentImg - 1], currentContainer, activeContainer);
};
var currentZindex = -1;
var showImage = function(photoObject, currentContainer, activeContainer) {
animating = true;
// Make sure the new container is always on the background
currentZindex--;
// Set the background image of the new active container
jQuery("#headerimg" + activeContainer).css({
"background-image" : "url(" + photoObject.image + ")",
"display" : "block",
"z-index" : currentZindex
});
// Hide the header text
jQuery("#headertxt").css({"display" : "none"});
// Set the new header text
jQuery("#firstline").html(photoObject.firstline);
jQuery("#firstline").css("marginLeft", "0").animate({
marginLeft: "-=100"
}, 4000, function() {
//Complete
}
);
jQuery("#secondline")
.attr("href", photoObject.url)
.html(photoObject.secondline);
jQuery("#pictureduri")
.attr("href", photoObject.url)
.html(photoObject.title);
// Fade out the current container
// and display the header text when animation is complete
jQuery("#headerimg" + currentContainer).fadeOut(function() {
setTimeout(function() {
jQuery("#headertxt").css({"display" : "block"});
animating = false;
}, 500);
});
};
var stopAnimation = function() {
// Change the background image to "play"
jQuery("#control").css({ "background-image" : "url(images/btn_play.png)" });
// Clear the interval
clearInterval(interval);
};
// We should statically set the first image
navigate("next");
// Start playing the animation
interval = setInterval(function() {
navigate("next");
}, slideshowSpeed);
});</script>
HTML
<div id="headerimgs">
<div id="headerimg1" class="headerimg"></div>
<div id="headerimg2" class="headerimg"></div>
</div>
<!-- Slideshow controls -->
<!-- jQuery handles for the text displayed on top of the images -->
<div id="headertxt">
<p class="caption">
<span id="firstline"></span>
<a href="#" id="secondline"></a>
</p>
<p class="pictured">
Pictured:
<a href="#" id="pictureduri"></a>
</p>
</div>
CSS
#header {
height: 220px;
width: 520px;
}
.headerimg {
background-position: center top;
background-repeat: no-repeat;
height: 220px;
position: absolute;
width: 520px;
}
#headertxt {
clear: both;
margin: 0 auto;
position: relative;
top: 50px;
width: 520px;
}
#firstline {
color: #333333;
display: block;
float: left;
font-size: 25px;
margin: 10px 10px 0 0;
padding: 10px;
marginLeft:0px !important;
}
#secondline {
clear: both;
color: #CD2B3A;
display: block;
float: left;
font-size: 40px;
margin: 10px 30px 0;
padding: 15px 10px;
text-decoration: none;
}
#headerimgs a {
text-indent: -999999px;
}
.new {
display: block;
height: 220px;
position: absolute;
width: 520px;
}
#secondline:hover { text-decoration:underline; color:#7F000C; }
.pictured {
background-color: #CC3333;
clear: both;
color: #FFFFFF;
display: block;
float: right;
font-size: 12px;
margin-top: 10px;
padding: 9px 16px;
}