0

由于某些翻转的原因，我的图像轮播一次显示所有图像。我不知道为什么，但我认为这与我的 CSS 有关。

#full_image {
 overflow:hidden;
 position:absolute;
}

#full_image ul li img {
 width:100%;
 max-width:100%;
 list-style: none outside none;
 position: relative;
 overflow: hidden;
}

#full_image .full_close {
 background: url('icons/zoom-on.png') no-repeat;
 top: 10px;
 cursor: pointer;
 height: 29px;
 opacity: 1;
 position: absolute;
 width: 29px;
 z-index: 999;
 right: 10px;
}

#full_image .next_big {
 background: url('icons/arrow-right.png') no-repeat;
 top: 50%;
 cursor: pointer;
 height: 29px;
 opacity: 1;
 position: absolute;
 width: 29px;
 z-index: 999;
 right: 0px;
}
#full_image .prev_big {
 background: url('icons/arrow-left.png') no-repeat;
 top: 50%;
 cursor: pointer;
 height: 29px;
 opacity: 1;
 position: absolute;
 width: 29px;
 z-index: 999;
 left: 0px;
 color: #222;
}

<div id="full_image"> 
    <ul><li><img src="'+img+'" /></a></li></ul> 
    <a href="#" class="full_close"></a>
    <a href="#" class="button next_big"></a>
    <a href="#" class="button prev_big"></a>
 </div>

我如何加载图像。

$.each(get_org_images, function (i, img) {
      if (i > 0){
          $('#full_image ul').append('<li><img src="' + img + '"/></li>');} });
4

2 回答 2

2

我不知道您的意思是“它们立即显示”。你希望他们做什么？也许更多的信息。有助于。

但是，你可以做一些性能方面的事情，比如：

var parent = $('#full_image').find("ul");
$.each(get_org_images, function (i, img) {
      if (i > 0){
          parent.append('<li><img src="' + img + '"/></li>');} });

不必每次都选择每个父级。然后$('#full_image').find("ul")是更好的选择器$('#full_image ul')

你可以这样做：

parent.append('<li><img style="display:none;" src="' + img + '"/></li>');} });

.hide() 会做什么。

于 2013-09-03T23:48:21.913 回答
1

如果您的 JavaScript 是为替换图像而编写的，那么您必须在代码中使用html而不是append。然后新图像将替换旧图像。

试试这个：

$.each(get_org_images, function (i, img) {
      if (i > 0){
          $('#full_image ul').html('<li><img src="' + img + '"/></li>');} });
于 2013-09-03T23:46:30.097 回答