0
所以我有一個旋轉器，它的效果很好。但是主箱子是由最大的圖像決定的。所有圖像（如果較小等）應該漂浮在主框的中心。不過，我的保證金編輯似乎沒有在代碼中做任何事情。任何想法爲什麼他們不適用？動態元素絕對中心
var postimgrotator = $('.postimgrotator'),
preloader = $('#loading-images');
postimgrotator.each(function() {
this['tmp'] = '';
this.tmp2 = '';
this.postimages = new Array();
this.cur = 0;
this.count = 0;
console.log($(this));
this['postimages'] = $(this).html().trim().split(" ");
this['count'] = this['postimages'].length;
$(this).html("");
for (this['cur'] = 0; this['cur'] < this['count']; this['cur']++) {
this['tmp'] += '<img src="' + this['postimages'][this['cur']].trim() + '" alt="Image ' + this['cur'] + '" class="postimgelm" />';
this['tmp2'] += '<img src="' + this['postimages'][this['cur']].trim() + '" alt="Image ' + this['cur'] + '" />';
}
$(this).css({
'width': this['tmp'],
'height': this['tmp2']
});
$(this).html(this['tmp'].trim());
preloader.html(this['tmp2']);
var width = 0,
height = 0;
preloader.find('img').each(function() {
if (width < parseInt($(this).width())) {
width = parseInt($(this).width());
}
if (height < parseInt($(this).height())) {
height = parseInt($(this).height());
}
});
console.log('Width: ' + width + ' Height: ' + height);
$(this).css({
'width': width,
'height': height
});
var images = $(this).find('img');
this['cur'] = 0;
images.not(':first').hide();
images.first().css({
'marginTop': '-' + parseInt(images.first().height()),
'marginLeft': '-' + parseInt(images.first().width())
});
var imgcur = 0,
count = this['count'];
this.imgrotate = setInterval(imgrotator, 5000);
function imgrotator() {
console.log(parseInt(images.eq(imgcur).height()));
images.eq(imgcur).css({
'marginTop': '-' + parseInt(images.eq(imgcur).height()),
'marginLeft': '-' + parseInt(images.eq(imgcur).width())
});
console.log(images.eq(imgcur));
images.eq(imgcur).fadeOut(300, function() {
imgcur += 1;
if (imgcur === count) {
imgcur = 0;
}
images.eq(imgcur).fadeIn('slow');
});
}
});#loading-images {
position:absolute;
top:0;
left:-9999px;
}
.postimgrotator {
position: relative;
background-color: rgba(0, 0, 0, 0.5);
padding: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
margin: 10px;
}
.postimgrotator img {
position: absolute;
top: 50%;
left: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="postimgrotator">http://i1291.photobucket.com/albums/b551/ToxicBKFX/Abstractweek2_zps25dbb861.png http://s28.postimg.org/xkim4q9xp/Aliens_Movie.png http://i.imgur.com/l2SQ4qW.png</div>
<div class="postimgrotator">http://i1291.photobucket.com/albums/b551/ToxicBKFX/Abstractweek2_zps25dbb861.png http://s28.postimg.org/xkim4q9xp/Aliens_Movie.png http://i.imgur.com/l2SQ4qW.png</div>
<div id="loading-images"></div>
[**定心 - 完整的導向**]（http://css-tricks.com/centering-css-complete-guide/）注 - '頂部：50％ ，左：50％'不居中......它將左上角置於中心。 – 2014-10-30 20:04:08
@Paulie_D請參閱代碼... jQuery是手頭的問題........我用'calc（50％ - '+ parseInt（images.eq（imgcur））嘗試了頂部/底部。 height（））+'）''也無濟於事。 – WAS 2014-10-30 20:09:47
您正在將圖像錯誤地放置在第一位......也許Jquery **不是**問題。 – 2014-10-30 20:11:44