jquery仅在5次点击后才有效

Question

我使用jQuery编写了一段代码（我从其他网站借了一些并调整了它），在按下按钮时循环显示ul图像，然后返回到第一张图像。我有一天打开Dreamweaver，但它无法正常工作。

现在图像循环直到最终图像变为空白，直到我完全按下按钮5次。我已经尝试了很多次，而且每次都是一样的。点击5次后，第一张图片再次淡入。

$('.next').click(function() {
    var $el = $('.image li a.image_select').removeClass('image_select');
    var $next = $el.parent().next();

    if ($next.length == 0)
        $next = $('.image li:first');

    $next.find('a.image1').addClass('image_select');
}); 


$('.prev').click(function() {
    var $el = $('.image li a.image_select').removeClass('image_select');
    var $prev = $el.parent().prev();

    if ($prev.length == 0)
        $prev = $('.image li').filter(":first");

    $prev.find('a.image1').addClass('image_select');
}); 

以下是图片列表的示例：

<div id="gallery_norway" class="gallery">
    <div class="image">
    <ul class="image_holder">
        <li><a class="image1 image_select" alt="" href="#"><img src="images/NW/NW0.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW1.jpg" alt="" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW2.jpg" alt="" width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW3.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW4.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW5.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW6.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW7.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW8.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW9.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW10.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW11.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW13.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW14.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW17.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW18.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW22.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW23.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW24.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW26.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW27.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW28.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW29.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW30.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW31.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW33.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW34.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW35.jpg" alt=""  width="100%" height="auto"></a></li>
        <li><a class="image1" href="#"><img src="images/NW/NW32.jpg" alt=""  width="100%" height="auto"></a></li>
        </ul>
    </div>
</div>


    .gallery {
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 100;
    display: none;
    text-align: center;
}

.image {
    background: white;
    position: absolute;
    width: 80%;
    height: 80%;
    z-index: 101;
    margin-left: 10%;
}

.image ul{
    list-style: none;
}

.image1 {
    background: white;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.image_select {
    background: white;
    opacity: 1;
}

.prev {
    font-size: 1.5vw;
    position: absolute;
    left: 5%;
    padding-right: 1%;
    top: 50%;
    z-index: 102;
    display: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.prev:hover {
    left: 4.5%;
    text-shadow: 1px 2px 1px rgba(0,0,0,0.2);
}


.next {
    font-size: 1.5vw;
    padding-left: 1%;
    position: absolute;
    right: 5%;
    top: 50%;
    z-index: 102;
    display: none;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.next:hover {
    right: 4.5%;
    text-shadow: 1px 2px 1px rgba(0,0,0,0.2);
}

.back {
    position: absolute;
    z-index: 1000;
    display: none;
    top: 5%;
    left: 5%;
    font-size: 1.2vw;
    font-family: 'Cormorant Garamond', 'EB Garamond', 'Josefin Sans', "Helvetica Neue", Helvetica, Arial, "sans-serif";
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.back:hover {
    text-decoration: underline;
    font-size: 1.3vw;
}