Question

我使用jQuery创建了一个照片库。当我点击照片，然后照片显示。我想添加一个导航按钮，我的意思是当我点击下一步，然后将显示下一个图像，当我点击上一个时，之前的图像将很好地显示。请帮我这样做。如果可能的话，请清楚地给我完整的代码。

我的CSS：

.gallery {
    border: 1px solid #5b6168;
    width: 162px;
    display:inline-block;
    margin:10px;
    border-radius:10px;
}
.img_head {
  border-bottom: 1px solid #5b6168;
  text-align: center;
  border-radius: 9px 9px 0 0;
  margin-top: -5px;
  background: linear-gradient(#698bf0, #0c101d);
}
.img_head h3{color:#ffffff; padding-top:5px;}
img.album {
  height: 150px;
  width: 150px;
  margin: 5px;
  border-radius: 0;
  cursor: pointer;
  transition:.5s;
}
img.album:hover {
  height: 158px;
  width: 158px;
  margin: 1px;
  border-radius: 0 0 10px 10px;
  cursor: pointer;
}
.abs {position:fixed; z-index:9999;}
#overlay {
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  bottom: 0;
  background: black;
  opacity: 0.5;
  z-index: 9999;
}

#lb {
  top: 30%;
  left: 3%;
  width: 50%;
  max-height: 100%;
  overflow: hidden;
  margin-left: 20%;
}

#lbHead {
  height: 40px;
  width: 100%;
  background: darkcyan;
}

#lbTitle {
  float: left;
  width: 70%;
  height: 30px;
  color: white;
}

#lbX {
  float: right;
  width: 30px;
  height: 40px;
  padding: 10px;
  text-align: center;
  color: #000000;
}

#lbX:hover {
  background: white;
  color: darkcyan;
  cursor: pointer;
}

img.album:hover {
  cursor: pointer;
}

#lb > #lbBody {
  text-align: center;
  padding-bottom: 5px;
  background: #ededed;
}

#lb #lbBody img {
  max-width: 100%;
  max-height: 1900px;
}

#overlay,
#lb {
  display: none;
}

.prev,
.next {
  display: inline-block;
  margin: 10px;
  color: #ffffff;
  cursor: pointer;
}

我的HTML：

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    </head>
    <body>
        <div id="overlay" class="abs"></div>
        <div id="lb" class="abs">
            <div id="lbHead">
                <div id="lbTitle">Your image</div><div id="lbX">X</div>
                <div class="prev"> << Prev </div>
                <div class="next"> next >> </div>
            </div>
            <div id="lbBody">
            </div>
        </div>
        <div class="gallery">
            <div class="img_head">
                <h3>Image Title</h3>
            </div>
            <img class="album albm_img" src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" alt="" />
        </div>
        <div id="" class="gallery">
            <div class="img_head">
                <h3>Image Title</h3>
            </div>
            <img class="album albm_img" src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" alt="" />
        </div>
        <div id="" class="gallery">
            <div class="img_head">
                <h3>Image Title</h3>
            </div>
            <img class="album albm_img" src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" alt="" />
        </div>
    </body>
</html>

我的JQuery

$(document).ready(function(){
    $('img').click(function(){
        var tmp = $(this).attr('src');
        $('#lbBody').html('<img src="'+tmp+'" />');
        $('#overlay, #lb').fadeIn(1800);
    });

    $('#lbX').click(function(){
        $('#overlay, #lb').fadeOut(800);
    });
});

想在jQuery照片库

0 个答案: