Question

这与我发布的How to make jQuery animate work only once?上一个问题有关。现在，我已经成功添加了提供的解决方案，它似乎首先正在工作。所以我尝试点击下一个按钮，然后如果它到达第三次点击，jquery滚动动画将生效。但是，当我尝试单击prev按钮时，jquery动画无效。它假设回到之前的图像。请帮助我解决这个问题。

以下是完整代码：

<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="Image1.js"></script>
<script type="text/javascript" src="Image2.js"></script>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
 </head>
 <body>

    <img id="defaultPic" src="microsoftLogo1.jpg" /><br/>
    <button id= "prev" class="portfolioNavigation">Previous</button>
    <div id="container">
       <ul id="imageList">  
            <li><img id="subPic1" src="microsoftLogo1.jpg" /></li>
            <li><img id="subPic2" src="microsoftLogo2.jpg" /></li>
            <li><img id="subPic3" src="microsoftLogo3.gif" /></li>
            <li><img id="subPic4" src="microsoftLogo4.jpg" /></li>
            <li><img id="subPic5" src="microsoftLogo5.png" /></li>
            <li><img id="subPic6" src="microsoftLogo6.png" /></li>

       </ul>
    </div>
    <button id= "next" class="portfolioNavigation">Next</button>
    <script type="text/javascript">
    var animation = true;
    var counter = 0;
    var srcArray = ["microsoftLogo1.jpg", "microsoftLogo2.jpg", 
     "microsoftLogo3.gif", "microsoftLogo4.jpg", "microsoftLogo5.png", 
     "microsoftLogo6.png"];
    var numImages = srcArray.length;

    if(counter == 0){
       document.getElementById('prev').disabled = 'true';
        document.getElementById('prev').style.opacity = '0.5';
    }

   prev.onclick = function(){

     document.getElementById("defaultPic").src = srcArray[(counter - 1) % 
    numImages];
     counter--;

     if(counter == 0){
       document.getElementById('prev').disabled = true;
       document.getElementById('prev').style.opacity = '0.5';
       document.getElementById('next').disabled = true;
    document.getElementById('next').style.opacity = '0.5';
     }

       if(counter == 2){
       $(function() {
            $('#prev').on('click', function() {
                    if (animation) {

                        $('#imageList').stop().animate({
                            left: '+=285px'
                        }, 1000, function() {
                           animation = false;
                        });
                }
            });
       });
      }
    };

next.onclick = function() {

document.getElementById("defaultPic").src = srcArray[(counter + 1) % 
numImages];
counter++;

if (counter == 5) {
    document.getElementById('next').disabled = true;
    document.getElementById('next').style.opacity = '0.5';
}

if (counter == 2) {
    document.getElementById('prev').disabled = false;
    document.getElementById('prev').style.opacity = '1';
    $(function() {
            $('#next').on('click', function() {
                    if (animation) {

                        $('#imageList').stop().animate({
                            left: '-=285px'
                        }, 1000, function() {
                            animation = false;
                        });
                }
            });
    });
 }
 };


</script>
</body>

Answer 1

你有变量动画，你试图控制两个单独的动画，只需设置另一个变量并使用它与第一个变量相同...

<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="Image1.js"></script>
<script type="text/javascript" src="Image2.js"></script>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>
 </head>
 <body>

    <img id="defaultPic" src="microsoftLogo1.jpg" /><br/>
    <button id= "prev" class="portfolioNavigation">Previous</button>
    <div id="container">
       <ul id="imageList">  
            <li><img id="subPic1" src="microsoftLogo1.jpg" /></li>
            <li><img id="subPic2" src="microsoftLogo2.jpg" /></li>
            <li><img id="subPic3" src="microsoftLogo3.gif" /></li>
            <li><img id="subPic4" src="microsoftLogo4.jpg" /></li>
            <li><img id="subPic5" src="microsoftLogo5.png" /></li>
            <li><img id="subPic6" src="microsoftLogo6.png" /></li>

       </ul>
    </div>
    <button id= "next" class="portfolioNavigation">Next</button>
    <script type="text/javascript">
    var animation = true;
    var backAnimation = true;
    var counter = 0;
    var srcArray = ["microsoftLogo1.jpg", "microsoftLogo2.jpg", 
     "microsoftLogo3.gif", "microsoftLogo4.jpg", "microsoftLogo5.png", 
     "microsoftLogo6.png"];
    var numImages = srcArray.length;

    if(counter == 0){
       document.getElementById('prev').disabled = 'true';
        document.getElementById('prev').style.opacity = '0.5';
    }

   prev.onclick = function(){

     document.getElementById("defaultPic").src = srcArray[(counter - 1) % 
    numImages];
     counter--;

     if(counter == 0){
       document.getElementById('prev').disabled = true;
       document.getElementById('prev').style.opacity = '0.5';
       document.getElementById('next').disabled = true;
    document.getElementById('next').style.opacity = '0.5';
     }

       if(counter == 2){
       $(function() {
            $('#prev').on('click', function() {
                    if (backAnimation) {

                        $('#imageList').stop().animate({
                            left: '+=285px'
                        }, 1000, function() {
                           backAnimation = false;
                        });
                }
            });
       });
      }
    };

next.onclick = function() {

document.getElementById("defaultPic").src = srcArray[(counter + 1) % 
numImages];
counter++;

if (counter == 5) {
    document.getElementById('next').disabled = true;
    document.getElementById('next').style.opacity = '0.5';
}

if (counter == 2) {
    document.getElementById('prev').disabled = false;
    document.getElementById('prev').style.opacity = '1';
    $(function() {
            $('#next').on('click', function() {
                    if (animation) {

                        $('#imageList').stop().animate({
                            left: '-=285px'
                        }, 1000, function() {
                            animation = false;
                        });
                }
            });
    });
 }
 };


</script>
</body>

Jquery滚动缩略图图像动画无法正常工作

1 个答案: