由于一些翻转原因我的图像轮播一次显示所有图像。我不知道为什么,但我认为它与我的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>');} });
答案 0 :(得分: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()会做的。
答案 1 :(得分:1)
如果您的JavaScript是为了替换图像而编写的,那么您必须在代码中使用 html 而不是追加。然后新图像将取代旧图像。
试试这个:
$.each(get_org_images, function (i, img) {
if (i > 0){
$('#full_image ul').html('<li><img src="' + img + '"/></li>');} });