Question

所以我有一个jquery图像滑块，当我点击上一个和下一个时，它可以正常工作。但是，当我单击播放时，第一个图像会淡出，然后第二个图像会正常显示。然后它再次逐渐消失到第一个和第二个图像，然后再转到第三个图像，然后它继续运行。

<html>
<head>

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>


    <script src="jqslideshow.js" type="text/javascript"></script>

</head>

<body>

    <img src="nature.jpg" id="slideshow" name="slideshows" width="500" height="300">

    <table>
        <tr>
            <td align="left"><a href="javascript:changeImage(-1)">Previous</a></td>
            <td align="right"><a href="javascript:changeImage(1)">Next</a></td>
            <td id="play_stop" align="right"><a href="javascript:play()">Play</a></td>
        </tr>
    </table>

</body>
</html>

<!-----------------------------------These are separate files---------------------------------------->

var Image = new Array("nature.jpg","treehouse.jpg","drstrange.jpg");

var ImageNumber = 0;

var ImageLength = Image.length - 1;

var Interval;

function changeImage(num){
ImageNumber = ImageNumber + num;

if(ImageNumber > ImageLength){
    ImageNumber = 0;
}

else if(ImageNumber < 0){
    ImageNumber = ImageLength;
}

$(document).ready(function(){


$('#slideshow').fadeOut('slow', function(){
            $(this).attr('src', src());
        }).fadeIn('slow');  

});

function src(){
document.slideshows.src = Image[ImageNumber];
}

}

function play(){
Interval = setInterval("changeImage(1)", 1000);
document.getElementById("play_stop").innerHTML = "<a       
href='javascript:stop()'>Stop</a>";
}

function stop(){
document.getElementById("play_stop").innerHTML = "<a  
href='javascript:play()'>Play</a>";
clearInterval(Interval);
}

我的jquery图像滑块自动播放无法正常工作

0 个答案: