添加下一个和上一个图像通过javascript

Question

我有一个弹出图像，它已经很好地工作。在这张弹出的图像中，我需要下一张和上一张来更改图像，但我不知道如何在弹出图像上设置下一张和上一张。 这里是HTML：

<div class="row-fluid"> 
    <div class="col-sm-12"> 
     <ul class="image-list"> 
      <li><img src="photos/g1.jpg" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> 
      <li><img src="photos/g2.jpg" alt="Photo number 2" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> 
      <li><img src="photos/g3.jpg" alt="Photo number 3" class="img-responsive img-thumbnail" onclick="view(this.src)"/></li> 
      <li><img src="photos/g4.jpg" alt="Photo number 4" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li> 
      <li><img src="photos/g5.jpg" alt="Photo number 5" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li> 
      <li><img src="photos/g6.jpg" alt="Photo number 6" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li> 
      <li><img src="photos/g7.jpg" alt="Photo number 7" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li> 
      <li><img src="photos/g8.jpg" alt="Photo number 8" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li> 
      <li><img src="photos/g9.jpg" alt="Photo number 9" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li> 
      <li><img src="photos/g10.jpg" alt="Photo number 10" class="img-responsive img-thumbnail" onclick="view(this.src)" /></li> 
     </ul> 
     <div class="navigation" id="nav"> 
      <span class="previous" id="prev">Prev</span> 
      <span class="next" id="next">Next</span> 
     </div> 
    </div> 
</div> 

CSS：

ul.image-list{ 
    padding:0; 
    margin: 0; 
    list-style: none; 
} 
ul.image-list li{ 
    display: inline-block; 
} 
ul.image-list li img{ 
    width: 190px; 
    min-width: 70px; 
    transition: all ease 0.4s; 
} 
ul.image-list li img:hover{ 
    cursor: pointer; 
    opacity: 0.5; 
    border: 1px solid #000; 
} 

Javascript：

function view(src) 
     { 
      var viewer = document.getElementById("viewer"); 
      viewer.innerHTML ='<img src="' + src + '" id="img"/>'; 
      viewer.innerHTML = 
      var img = document.getElementById("img"); 
      var iw=0, ih=0; 
      var dw=0, dh=0; 

      img.onload=function(){ 
       document.getElementById("ov").style.display="block"; 
       document.getElementById("nav").style.display="block"; 
       viewer.style.display="block"; 
       iw = viewer.offsetWidth; 
       ih = viewer.offsetHeight; 
       dw = window.innerWidth; 
       dh = window.innerHeight; 
       viewer.style.top = parseInt(dh/2-ih/2) + "px"; 
       viewer.style.left = parseInt(dw/2-iw/2) + "px"; 
      }; 
     } 
     function hide2() 
     { 
      document.getElementById("viewer").style.display="none"; 
      document.getElementById("ov").style.display="none"; 
      document.getElementById("nav").style.display="none"; 
     } 

Answer 1

PLZ试试这个

Demo

$(".popup").popup({ 
    transparentLayer : true, 
    gallery : true, 
    galleryTitle : "<a href="http://www.jqueryscript.net/gallery/">Gallery</a>1 Title", 
    imgaeDesc : true, 
    galleryCounter : true, 
    08 
    imageDesc : true, 
    09 
    autoSize : false, 

    boxHeight : 600, 

    boxWidth : 500, 

    shadowLength : 0, 

    transition : 0, 
     onOpen : function() { 

    console.log("opened the box .popup"); 

    }, 

    onClose : function() { 

    console.log("closed the box .popup"); 

    } 



    }); 

PLZ尝试anotherone例如：

Demo

Answer 2

狐例如

<li><img src="photos/g1.jpg" alt="Photo number 1" class="img-responsive img-thumbnail" onclick="view(this)"/></li> 

添加window.lastImageShown为最后选择的图像知道

function view(image) 
     { 
      window.lastImageShown = image; 
      var viewer = document.getElementById("viewer"); 
      viewer.innerHTML ='<img src="' + image.src + '" id="img"/>'; 
      /** your code */ 

function hide2() 
     { 
      window.lastImageShown = null; 
      document.getElementById("viewer").style.display="none"; 
      /** your code */ 

，并使用window.lastImageShown切换在图像之间

//window.lastImageShown - image 
    //window.lastImageShown.parentNode - li 

    //window.lastImageShown.parentNode.nextSibling - next li 
    //window.lastImageShown.parentNode.nextSibling.firstChild - next image 
    function next(){ 
     if(window.lastImageShown && window.lastImageShown.parentNode.nextSibling){ 
      view(window.lastImageShown.parentNode.nextSibling.firstChild); 
     } 
    } 
//window.lastImageShown.parentNode.nextSibling - prev li 
//window.lastImageShown.parentNode.nextSibling.firstChild - prev image 
    function prev(){ 
     if(window.lastImageShown && window.lastImageShown.parentNode.nextSibling){ 
      view(window.lastImageShown.parentNode.previousSibling.firstChild); 
     } 
    } 

<div class="navigation" id="nav"> 
      <span class="previous" id="prev" onclick="prev()">Prev</span> 
      <span class="next" id="next" onclick="next()">Next</span> 
     </div>