将“下一步”和“上一个”按钮添加到较大的图像

adding a next and prev button to the larger image

本文关键字：上一个 下一步 图像 按钮 添加      更新时间：2023-09-26

我正在创建一个图像缩略图滑块，当我单击缩略图图像时，将打开一个带有较大图像的弹出框。在这里，我需要将下一个和上一个按钮添加到更大的图像中。

这是我练习的：

.HTML 

<div id="wrapper">
  <div id="content">
  <div id="content_left">
  </div>
<ul id="thumb_holder">
  <li><a href="javascript:void(0);"><img src="img/img1_thumb.jpg" alt="motherly" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img2_thumb.jpg" alt="xo" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img3_thumb.jpg" alt="keep your eyes open" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img4_thumb.jpg" alt="bacon bits" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img5_thumb.jpg" alt="nature sent packing" /> </a></li>
    <li><a href="javascript:void(0);"><img src="img/img6_thumb.jpg" alt="snow man" /> </a></li>
    </ul>
    </div>
    <div id="large_image_holder">
      <ul id="large_images">
        <li><img src="img/img1.jpg" alt="motherly" /></li>
        <li><img src="img/img2.jpg" alt="xo" /></li>
        <li><img src="img/img3.jpg" alt="keep your eyes open" /></li>
        <li><img src="img/img4.jpg" alt="bacon bits" /></li>
        <li><img src="img/img5.jpg" alt="nature sent packing" /></li>
        <li><img src="img/img6.jpg" alt="snow man" /></li>
      </ul>
    </div>
  </div>
</div>

Jquery

$(document).ready (function(){      
    $("#large_images li").each(function(index, element){$(element).attr("class", 'hide');});
    $("#large_images li").each(function(index, element){$(element).attr("id", 'img'+index);});
    $("#thumb_holder li a").each(function(index, element){$(element).attr("rel", 'img'+index);});
    var mainImg ='img0';
    var current = 'img0';
    $('#img0').css('display', 'inline');
    $('#img0').addClass('current');
    $('#thumb_holder li a').click (function(){                                 
        mainImg = $(this).attr('rel');
        if(mainImg != current){
        $('.current').fadeOut('slow');
        $('#'+mainImg).fadeIn('slow', function(){
        $(this).addClass('current');
        current = mainImg;
        });
        }
    });
});

<div id="picture">
    <a id="prev" class="nav"> Next</a>
    <a id="next" class="nav"> Prev</a>
</div>​

和 CSS

a.nav{
    position:absolute;
    top:10px;
    cursor:pointer;
}
#picture a#prev{
    color:red;
    left:10px; 
    /*background: add images for nav buttons if needed*/
}
#picture a#next{
    color:blue;
    right:10px;
}
#picture{
   position:relative;
}

对于点击处理程序..

$('#picture').on('click', '.nav', function(){
     alert(this.id); //Do what you do in $('#thumb_holder li a').click..
});​

演示

相关文章：