大图像

Question

缩略图滚动条我想你对这个脚本帮助：

<link rel="stylesheet" href="css-web/w3.css"> 
<div class="w3-content w3-display-container" id="parag1"> 
    <img class="mySlides" src="gallery/day/1.jpg" style="width:100%"> 
    <img class="mySlides" src="gallery/day/2.jpg" style="width:100%"> 
    <img class="mySlides" src="gallery/day/3.jpg" style="width:100%"> 
    <img class="mySlides" src="gallery/day/4.jpg" style="width:100%"> 
    <img class="mySlides" src="gallery/day/5.jpg" style="width:100%"> 
    <img class="mySlides" src="gallery/day/6.jpg" style="width:100%"> 
    <img class="mySlides" src="gallery/day/7.jpg" style="width:100%"> 
    <img class="mySlides" src="gallery/day/8.jpg" style="width:100%"> 

    <a class="w3-btn-floating w3-display-left" onclick="plusDivs(-1)"> 
     <img src="img/larrow.png" class="leftarrow" /> 
    </a> 
    <a class="w3-btn-floating w3-display-right" onclick="plusDivs(1)"> 
     <img src="img/rarrow.png" class="rightarrow" /> 
    </a> 

    <div class="w3-row-padding w3-section" style="width: 80%;margin:auto;"> 
     <div class="w3-col s3"> 
      <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/1.jpg" style="width:100%" onclick="currentDiv(1)"> 
     </div> 
     <div class="w3-col s3"> 
      <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/2.jpg" style="width:100%" onclick="currentDiv(2)"> 
     </div> 
     <div class="w3-col s3"> 
      <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/3.jpg" style="width:100%" onclick="currentDiv(3)"> 
     </div> 
     <div class="w3-col s3"> 
      <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/4.jpg" style="width:100%" onclick="currentDiv(4)"> 
     </div> 
     <div class="w3-col s3"> 
      <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/5.jpg" style="width:100%" onclick="currentDiv(5)"> 
     </div> 
     <div class="w3-col s3"> 
      <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/6.jpg" style="width:100%" onclick="currentDiv(6)"> 
     </div> 
     <div class="w3-col s3"> 
      <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/7.jpg" style="width:100%" onclick="currentDiv(7)"> 
     </div> 
     <div class="w3-col s3"> 
      <img class="demo w3-opacity w3-hover-opacity-off" src="gallery/day/8.jpg" style="width:100%" onclick="currentDiv(8)"> 
     </div> 
    </div> 
</div> 


<script src="http://code.jquery.com/jquery-1.6.4.js"></script> 
<script> 
    var slideIndex = 1; 
    showDivs(slideIndex); 

    function plusDivs(n) { 
     showDivs(slideIndex += n); 
    } 

    function currentDiv(n) { 
     showDivs(slideIndex = n); 
    } 

    function showDivs(n) { 
     var i; 
     var x = document.getElementsByClassName("mySlides"); 
     var dots = document.getElementsByClassName("demo"); 
     if (n > x.length) { 
      slideIndex = 1 
     } 
     if (n < 1) { 
      slideIndex = x.length 
     } 
     for (i = 0; i < x.length; i++) { 
      x[i].style.display = "none"; 
     } 
     for (i = 0; i < dots.length; i++) { 
      dots[i].className = dots[i].className.replace(" w3-opacity-off", ""); 
     } 
     x[slideIndex - 1].style.display = "block"; 
     dots[slideIndex - 1].className += " w3-opacity-off"; 
    } 
</script> 

脚本显示缩略图图像，最大需要4出现在大图像的底部。 当我们点击下一张和上一张时，缩略图上的图像会改变悬停，但不会滚动。

我需要你们的帮助，让图片滚动缩略图，当我们在上一个点击&下一个（箭头按钮）。

在此先感谢

Answer 1

我建议你使用fancybox脚本。你可以在这里下载它：http://fancybox.net/

它是高度可定制的，你可以用JavaScript中的一些设置来完成你想要的功能，这些设置将在网站上解释。