Jquery 为什么我的图片在页面呈现时会横向移动？
我正在构建一个基于JQuery的照片库，其中包含导航选项卡，可以在缩略图页面之间进行排序。该功能现在主要存在，但当页面首次加载选项卡中的所有图像时，请将几个像素加载到其正确位置的右侧，然后向左移动。它们在正确的地方结束，但看起来很乱 我认为这是因为我必须在JQuery代码中构建一些活动的CSS更改，以使选项卡正确更改，但我无法确定在最初的代码中修复它的位置。这是我的HTML、CSS和JQuery。有人能看到这个问题吗 jsFiddle： HTMLJquery 为什么我的图片在页面呈现时会横向移动？,jquery,html,css,Jquery,Html,Css,我正在构建一个基于JQuery的照片库，其中包含导航选项卡，可以在缩略图页面之间进行排序。该功能现在主要存在，但当页面首次加载选项卡中的所有图像时，请将几个像素加载到其正确位置的右侧，然后向左移动。它们在正确的地方结束，但看起来很乱 我认为这是因为我必须在JQuery代码中构建一些活动的CSS更改，以使选项卡正确更改，但我无法确定在最初的代码中修复它的位置。这是我的HTML、CSS和JQuery。有人能看到这个问题吗 jsFiddle： HTML <body> <div cla
<body>
<div class="page_container">
<div class="gallery_credit"><h1>Illisia Adams</h1></div>
<div class="gallery_type"><h1>Gallery 1</h1></div>
<div class="clear_both"></div>
<div class="gallery_top"></div>
<div class="gallery_content">
<div class="sp">
<div class="tabs">
<span>Page 1</span>
<span>Page 2</span>
<span>Page 3</span>
</div>
<div class="gallery_thumbnails">
<div class="panels">
<div class="panel">
<div class="panel_content">
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<div class="clear_both"></div>
</div>
</div>
<div class="panel">
<div class="panel_content">
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<div class="clear_both"></div>
</div>
</div>
<div class="panel">
<div class="panel_content">
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<a href="images/photos/apartments_fullsize.jpg" title="Caption for apartments here"><img src="images/photos/apartments_thumbnail.jpg"/></a>
<a href="images/photos/acrobats_fullsize.jpg" title="Caption for acrobats goes here"><img src="images/photos/acrobats_thumbnail.jpg"/></a>
<div class="clear_both"></div>
</div>
</div>
</div>
</div>
</div>
<div class="gallery_preview">
img
</div>
<div class="clear_both"></div>
<div class="gallery_caption">text</div>
<div class="clear_both"></div>
<div class="gallery_preload_area"></div>
</div>
<div class="gallery_bottom"></div>
</div>
</body>
var panelWidth = 0;
var startPanel = 1;
$(document).ready(function() {
/* Active Styling */
$('.sp .tabs').css('display','block');
$('.sp .gallery_thumbnails .panel').css({'position':'absolute', 'height':'277px'});
$('.sp .gallery_thumbnails .panels').css({'position':'absolute'});
window.panelWidth = $('.sp').width();
/* Position the panels */
$('.gallery_thumbnails .panel').each(function(index){
$(this).css({'width':window.panelWidth+'px','left':(index*window.panelWidth)});
$('.sp .panels').css('width',(index+1)*window.panelWidth+'px');
});
/* Add click events to tabs */
$('.sp .tabs span').each(function(){
$(this).on('click', function(){
changePanels( $(this).index() );
});
});
/* Trigger the starting panel */
$('.sp .tabs span:nth-child('+window.startPanel+')').trigger('click');
});
function changePanels(newIndex){
var newPanelPosition = ( window.panelWidth * newIndex ) * -1;
var newPanelHeight = $('.sp .panel:nth-child('+(newIndex+1)+')').find('.panel_content').height() + 15;
$('.sp .tabs span').removeClass('selected');
$('.sp .tabs span:nth-child('+(newIndex+1)+')').addClass('selected');
$('.sp .panels').animate({left:newPanelPosition},1000);
$('.sp .panel_container').animate({height:newPanelHeight},1000);
}
请发表一篇文章，有很多代码需要使用。尽量避免使用js样式，并使用纯css使您的布局看起来没有任何包含的js文件。
var panelWidth = 0;
var startPanel = 1;
$(document).ready(function() {
/* Active Styling */
$('.sp .tabs').css('display','block');
$('.sp .gallery_thumbnails .panel').css({'position':'absolute', 'height':'277px'});
$('.sp .gallery_thumbnails .panels').css({'position':'absolute'});
window.panelWidth = $('.sp').width();
/* Position the panels */
$('.gallery_thumbnails .panel').each(function(index){
$(this).css({'width':window.panelWidth+'px','left':(index*window.panelWidth)});
$('.sp .panels').css('width',(index+1)*window.panelWidth+'px');
});
/* Add click events to tabs */
$('.sp .tabs span').each(function(){
$(this).on('click', function(){
changePanels( $(this).index() );
});
});
/* Trigger the starting panel */
$('.sp .tabs span:nth-child('+window.startPanel+')').trigger('click');
});
function changePanels(newIndex){
var newPanelPosition = ( window.panelWidth * newIndex ) * -1;
var newPanelHeight = $('.sp .panel:nth-child('+(newIndex+1)+')').find('.panel_content').height() + 15;
$('.sp .tabs span').removeClass('selected');
$('.sp .tabs span:nth-child('+(newIndex+1)+')').addClass('selected');
$('.sp .panels').animate({left:newPanelPosition},1000);
$('.sp .panel_container').animate({height:newPanelHeight},1000);
}