带有大图像的缩略图滚动

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 中的一些设置来做您想做的事情。