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

这与我发布的以前的问题有关，如何使jQuery Animate仅起作用一次？现在，我已经成功添加了提供的解决方案，并且它一开始就在起作用。因此，我尝试单击下一个按钮，然后如果它达到第三个单击，则jQuery滚动动画将生效。但是，当我尝试单击"上述"按钮时，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>

您在可变动画上拥有，您试图控制两个单独的动画，只需设置另一个变量，然后以与第一个变量相同的方式使用它...

<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>

相关内容

最新更新

热门标签：