Question

我需要在div（.slider）中插入一个图像，当我点击链接“prev”和“next”时，我有一个这样的结构：

<a class="prev"></a>
    <div class="slider">
    </div>
<a class="next"></a>

    <div class="thumbnails">
      <ul>
        <li><img src="" alt="" /></li>
        <li><img src="" alt="" /></li>
        <li><img src="" alt="" /></li>
        <li><img src="" alt="" /></li>
      </ul>
    </div>

div.slider的两面，我有两个链接“prev”和“next”，转到下一个和prev图像，我怎么能用jQuery，或者javascript来做？

谢谢！

Answer 1

$('.prev').click(function(){
   if(current>0){
       current--;
       changeImage(current);
   }
});

$('.next').click(function(){
    current++;
    changeImage(current);
});

var current=0;
changeImage(current);
function changeImage(index){
  if($('li img').eq(index).length){
      var src=$('li img').eq(index).attr('src');
      $('.slider').html('<img src="'+src+'" />');
  }
}

尝试这样的事情

Answer 2

我认为添加img元素比使用html更好：

var current = 0;
$("a.prev").click(function(){
  $(".slider img").attr("src", $(".thumbnails li").eq(current--).attr("src") );
})
$("a.next").click(function(){
  $(".slider img").attr("src", $(".thumbnails li").eq(current++).attr("src") );
})

此外，请确保处理prev导致当前＆lt; 0或当前＆gt; = $（“。缩略图li”）。长度

如何使用jquery在div中插入ul列表的图像

2 个答案: