Question

我试图创建一个jquery幻灯片放映。每张幻灯片都有自己的信息div，这里以简短的方式显示，仅包含标题但是，有些事情是错误的。只有第一张幻灯片正在运行，而不是完全正确。

HTML

<div id='wrapslider'>
<div id='sliderins'>

<div class='slideimgwrap'>
<img class='slideimg' src='images/001.jpg' alt='img'>
<div class='slideinfo'>
<div class='slidetitle'>TITLE 01</div>
</div>
</div>

<div class='slideimgwrap'>
<img class='slideimg' src='images/002.jpg' alt='img'>
<div class='slideinfo'>
<div class='slidetitle'>TITLE 02</div>
</div>
</div>

<div class='slideimgwrap'>
<img class='slideimg' src='images/003.jpg' alt='img'>
<div class='slideinfo'>
<div class='slidetitle'>TITLE 03</div>
</div>
</div>

</div>
</div>

CSS

#wrapslider{
    float:left;
    width:57%;
    position:relative;
    overflow:hidden;
}
#sliderins{
    width:100%;
}
.slideimgwrap{
    position:absolute;
    display:block;
    width:100%;
    left:0; top:0;
    background:green;
}
.slideimg{
    display:block;
    width:100%;
    margin:0 auto;
}
.slideinfo{
    position:absolute;
    left:0; bottom:0;
    width:100%;
    background:#000;
    opacity:0.6;
    padding:14px;
    color:#fff;
    letter-spacing:1px;
    font-weight:bold;
}

JS

$(document).ready(function() {
var w1 = $('#wrapslider').width();
var h1 = (w1 / 16) * 9;
$('#wrapslider, #sliderins, .slideimgwrap').css('height', h1);

function goleft(){
$('#sliderins :last-child').animate({'left': '-' + w1}, 1500, append);
};

function append(){
    $("#sliderins :last-child").prependTo("#sliderins").css('left', 0);
};

var interval = setInterval(goleft, 5000);

});

JSFiddle

Answer 1

您正在使用jQuery选择器＆＃34; #sliderins：last-child＆＃34;希望选择#sliderins的最后一个孩子。这听起来很合理，但你实际做的是在#sliderins中的任何地方选择任何元素，这是其父母的最后一个孩子。

如果您将其更改为＆＃34; #sliderins＆gt; ：最后的孩子＆＃34; （在两个地方），你的代码有效。＆＃34;＆gt;＆＃34;意味着你只选择#sliderins的直系孩子（没有孙子等）

另一个能够获得当前幻灯片的选择器将是＆＃34; .slideimgwrap：last-child＆＃34; - 即页面上带有类＆＃34; slideimagwrap＆＃34;的任何元素。这是其父母的最后一个孩子。

所以，你几乎就在那里。做得好！

一个小故障：你的.slideinfo divs推出到他们容器的右边，因为它们具有相同的宽度，但它们也有填充（它被添加到宽度，取决于＆＃34;框大小＆＃34 ;您正在使用。以下是解释：http://www.w3schools.com/css/css3_box-sizing.asp

其他说明：javascript非常宽容，并试图猜测字符串实际上是一个数字，但使用字符串"-"构造负值有点奇怪和不必要。要获得负w1，只需使用0 - w1

简单的jquery图像滑块

1 个答案: