Question

我想制作简单的图像滑块。一切正常，直到你到达最后一个图像（div）。当滑块再次启动时，第一张图像将覆盖所有其他图像。我试图改变z-index图像（div），但我仍有同样的问题。

＆＃13;

var index = 1;
function whichimg()
{
    $('#trace').text('image index ' + index);
    if (index < 5)
    {
        changeimg(index);
        index = index + 1;
    }
    else
    {
        index = 1;
    }
}

function changeimg(indexofImg)
{
    $('#imgid' + indexofImg).slideToggle();
}

setInterval(whichimg, 1000);

＆＃13;

#imggruop li {
    display: inline;
    float: left;
    list-style: none;
}

#imagewapper {
    width: 600px;
    height: 400px;
    overflow: hidden;
}

#imgid1, #imgid2, #imgid3, #imgid4 {
    width: 300px;
    height: 300px
}

#imgid1 { background-color: #ff0000; }
#imgid2 { background-color: #63ff1b; }
#imgid3 { background-color: #fff717; }
#imgid4 { background-color: #2a6aff; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="trace"></div>

<div id="imagewapper" >
    <ul id="imggruop">
        <li><div id="imgid1"> IMAGE 1 </div></li>
        <li><div id="imgid2"> IMAGE 2 </div></li>
        <li><div id="imgid3"> IMAGE 3 </div></li>
        <li><div id="imgid4"> IMAGE 4 </div></li>
      </ul>
</div>

＆＃13;

Answer 1

您可以在changeimg功能中添加以下代码：

$('#imgid' + indexofImg).slideUp();
if (index == 4) {
    for (var x = 1; x < 5; x++) {
        $('#imgid' + x).slideDown();   
    }
}

示例here。

Answer 2

@Florin Pop的回答很好。我只是添加了一个更简单的方法来实现相同的目标。只需用

替换您的javascript代码即可

function changeimg()
{  
    marginTop = $("#imagewapper").outerHeight();
    $("#imggruop").animate({
        marginTop: -(marginTop)+"px"
      },1000,function(){

      firstEl = $("#imggruop").children("li:first");
      $("#imggruop").children("li:first").remove();
      $("#imggruop").css("margin-top","0");
      $("#imggruop").append(firstEl);
   });     
}

setInterval(changeimg, 1500);

查看小提琴here

Answer 3

解决方案非常简单我只需将此行添加到我的代码中，并且工作得很好！

由于slideToggle将显示设置为none，在幻灯片放映结束时我必须重新显示滑块再次启动前的所有图像：D

 $('#imgid1,#imgid2,#imgid3,#imgid4').show();

简单图像滑块不起作用

3 个答案: