Question

的style.css

.gallery .container {
  max-width: 600px;
  background-color: black;
  margin: 0 auto;
  text-align: center;
}

.container .frame {
  position: relative;
}

.container .frame .control {
  position: absolute;
  top: 40%;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  color: black;
  font-size: 3em;
}

.container .frame .control:hover {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-transition: background 0.25s linear;
  -moz-transition: background 0.25s linear;
  -ms-transition: background 0.25s linear;
  -o-transition: background 0.25s linear;
  transition: background 0.25s linear;
}

.container .frame #previous {
  left: 5px;
}

.container .frame #next {
  right: 5px;
}

.container .frame #previous::before {
  content: '<';
}

.container .frame #next::before {
  content: '>';
}

.container .frame .image {
  width: 100%;
}

.container .image:first-child {
  display: inline-block;
}

.container .image:not(:first-child) {
  display: none;
}

.container .image img {
  width: 100%;
  height: auto;
}

.container .thumbnails {
  padding: 15px 0 15px 0;
  width: 100%;
  display: block; 
  overflow-x: scroll; 
  white-space: nowrap;
}

.container .thumbnails div {
  display: table-cell;
  height: 100px;
  width: auto;
}

.container .thumbnails img {
  width: inherit; 
  height: inherit;
  opacity: 0.8;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.container .thumbnails div.active img {
  opacity: 0.4; 
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

的index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Image Gallery</title>
    <link rel="stylesheet" href="css/style.css">
    <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</head>

<body>

    <section class="gallery">
        <div class="container">
            <div class="frame">
                <div class="image">
                    <img src="https://placeimg.com/640/480/people" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/arch" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/animals" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/nature" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/tech" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/grayscale" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/sepia" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/people" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/arch" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/animals" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/nature" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/tech" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/grayscale" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/sepia" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/people" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/arch" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/animals" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/nature" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/tech" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/grayscale" alt="">
                </div>
                <div class="image">
                    <img src="https://placeimg.com/640/480/sepia" alt="">
                </div>
            </div>
            <div class="thumbnails"></div>
        </div>
    </section>

    <p style="text-align: center;"><a href="http://github.com/harveylowndes/gallery">View on GitHub</a></p>

    <!-- JQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

    <!--Gallery Javascript -->
    <script src="js/gallerynew.js"></script>

</body>
</html>

gallerynew.js

    var images = (function() {

        var imageArray = $('.gallery .container .frame .image');
        var currentImageIndex = 0;

        var getImageArray = function() {
            return $(imageArray);
        };

        var setCurrentImageIndex = function(newIndex) {
            currentImageIndex = newIndex;
        };

        var getImage = function(index) {
            return $(getImageArray()).get(index);
        };

        var getImageSource = function(index) {
            var image = getImage(index);
            var img = $(image).find('img').get(0);
            var src = $(img).attr('src');
            return src;
        };

        var getCurrentImageIndex = function() {
            return currentImageIndex;
        };

        var clearCurrentImage = function() {
            var current = getImage(getCurrentImageIndex);
            $(current).fadeOut().css('display', 'none');

            var currentThumbnail = $(thumbnails.getThumbnailArray()).find('div').get(getCurrentImageIndex);
            $(currentThumbnail).removeClass('active');
        };

        /*
            Display new image.
        */
        var displayImage = function(index) {
            var image = getImage(index);
            $(image).fadeIn().css('display', 'inline-block');

            var imageThumbnail = $(thumbnails.getThumbnailArray()).find('div').get(index);
            $(imageThumbnail).addClass('active');

            thumbnails.scrollThumbnails(); //Scroll to correct thumb.
        };

        /*
            Display next image.
         */
        var displayNextImage = function() {
            clearCurrentImage();
            var nextImage = getCurrentImageIndex() + 1;
            setCurrentImageIndex(getCurrentImageIndex() + 1);
            if (nextImage > getImageArray().length - 1) {
                nextImage = 0;
                setCurrentImageIndex(0);
            }
            displayImage(nextImage);
        };

        /*
            Display previous image.
         */
        var displayPreviousImage= function() {
            clearCurrentImage();
            var previousImage = getCurrentImageIndex() - 1;
            setCurrentImageIndex(getCurrentImageIndex() - 1);
            if (previousImage < 0) {
                previousImage = getImageArray().length-1;
                setCurrentImageIndex(images.getImageArray().length-1);
            }
            displayImage(previousImage);
        };

        // Public API
        return {
            getCurrentImageIndex : getCurrentImageIndex,
            getImageArray : getImageArray,
            getImageSource : getImageSource,
            displayImage : displayImage,
            displayPreviousImage, displayPreviousImage,
            displayNextImage : displayNextImage,
            clearCurrentImage : clearCurrentImage
        };

    })();

    var thumbnails = (function() {
        var thumbnailArray = $('.gallery .container .thumbnails');

        var getThumbnailArray = function() {
            return $(thumbnailArray);
        };

        var initThumbnails = function() {
            images.getImageArray().each(function(index) {
                var src = images.getImageSource(index);
                $(getThumbnailArray()).append('<div><img src="' + src + '" /></div>');
            });
        };

        var getScrollWidth = function() {
            var width = 0;
            var currentIndex = images.getCurrentImageIndex();
            if(currentIndex - 1 != -1) {
                for (var i = 0; i < images.getCurrentImageIndex - 1; i++) {
                    var current = $(getThumbnailArray()).find('div').get(i);
                    var image = $(current).find('img').get(0);
                    width = width + $(image).width();
                }
                return width;
            } else {
                return 0;
            }
        };

        /*
            Scroll to correct thumbnail.
        */
        var scrollThumbnails = function() {
            $(getThumbnailArray()).animate({
                scrollLeft: getScrollWidth()
            }, 500);
        };

        // Public API
        return {
            getThumbnailArray : getThumbnailArray,
            initThumbnails : initThumbnails,
            scrollThumbnails : scrollThumbnails
        };

    })();

    var interval = (function() {
        //Cycle stuff
        var cycleTime = 5000; 
        var _intervalId;


        var imageCycle = function() {
            images.displayNextImage(); //Display next image.
        };

        var getCycleTime = function() {
            return cycleTime; //Display next image.
        };

        /*
            Interval manager for cycle.
         */
        var intervalManager = function(flag, animate, time) {
            if (flag)
                _intervalId = setInterval(animate, time);
            else
                clearInterval(_intervalId);
        }

        function startInterval() {
            intervalManager(true, imageCycle(), getCycleTime());
        }

         /*
            Restarts the interval.
        */
        function resetInterval() {
            intervalManager(false); //Clear the interval.
            intervalManager(true, imageCycle, cycleTime); //Start the interval.
        }

        // Public API
        return {
            startInterval : startInterval,
            resetInterval: resetInterval
        };
    })();

$(document).ready(function() {
    //Controls
    $('.gallery .container .frame')
        .append('<span id="previous" class="control"></span><span id="next" class="control"></span>');

    //Generate thumbnails
    thumbnails.initThumbnails();

    //Set first thumb active.
    var currentThumbnail = $(thumbnails.getThumbnailArray).find('div').get(images.getCurrentImageIndex());
    $(currentThumbnail).addClass('active');

    //Start interval.
    interval.startInterval();
});

$(thumbnails.getThumbnailArray).find("div").click(function() { //Thumnail click.
    var divIndex = $(this).index();
    if(divIndex != images.getCurrentImageIndex) {
        images.clearCurrentImage(); //Clear current image from browser.
        images.getCurrentImageIndex = divIndex; //Set current image to clicked thumbnail index.
        images.displayImage(images.getCurrentImageIndex); //Display new current image.
        interval.resetInterval(); //Restart the interval.
    }
});

$("#previous").click(function() { //Previous control click.
    images.displayPreviousImage();
    interval.resetInterval();
});

$("#next").click(function() { //Next control click.
    images.displayNextImage();
    interval.resetInterval();
});

我收到错误：

TypeError: images.getCurrentImageIndex is not a function

我一直在寻找解决这个问题的方法，我认为这可能是因为它在加载之前调用了函数，但即使有了更改，这仍然无效。

Answer 1

错误是由以下代码引起的：

$(thumbnails.getThumbnailArray).find("div").click(function() { //Thumnail click.
    var divIndex = $(this).index();
    if(divIndex != images.getCurrentImageIndex) {
        images.clearCurrentImage(); //Clear current image from browser.
        images.getCurrentImageIndex = divIndex; //Set current image to clicked thumbnail index.
        images.displayImage(images.getCurrentImageIndex); //Display new current image.
        interval.resetInterval(); //Restart the interval.
    }
});

在该代码中，访问images.getCurrentImageIndex，因为它是一个数字。但它是一种功能。所以这个条件：

if(divIndex != images.getCurrentImageIndex) {

...将永远为真（等式的两边都被强制为字符串，它们永远不会相等）。

然后事情变得更糟：

images.getCurrentImageIndex = divIndex;

现在您销毁该函数，并将其替换为普通数字。下次你打电话给＆＃34;功能＆＃34;它会因你得到的错误而失败。

所以将上面的代码块修复为：

$(thumbnails.getThumbnailArray).find("div").click(function() { //Thumnail click.
    var divIndex = $(this).index();
    if(divIndex != images.getCurrentImageIndex()) { // **Call it!
        images.clearCurrentImage(); //Clear current image from browser.
        images.setCurrentImageIndex(divIndex); // **Use the function!!
        images.displayImage(images.getCurrentImageIndex()); // **Call it!!
        interval.resetInterval(); //Restart the interval.
    }
});

解决了运行时错误。

需要修复的其他事项

您可以在几个地方引用该功能，但实际上应该调用：

var clearCurrentImage = function() {
    var current = getImage(getCurrentImageIndex);

您需要致电getCurrentImageIndex：

var clearCurrentImage = function() {
    var current = getImage(getCurrentImageIndex()); // <--

再次，在这里：

var clearCurrentImage = function() {
    var current = getImage(getCurrentImageIndex);
    $(current).fadeOut().css('display', 'none');

    var currentThumbnail = $(thumbnails.getThumbnailArray()).find('div').get(getCurrentImageIndex);

最后一行应以：

结束

    .get(getCurrentImageIndex()); // <---

再次，在这里：

var getScrollWidth = function() {
    var width = 0;
    var currentIndex = images.getCurrentImageIndex();
    if(currentIndex - 1 != -1) {
        for (var i = 0; i < images.getCurrentImageIndex - 1; i++) {

for循环应为：

        for (var i = 0; i < images.getCurrentImageIndex() - 1; i++) {

......等等。

使用JQuery模块模式时，'Typeerror：不是函数'

1 个答案:

需要修复的其他事项