jQuery幻灯片停止按钮

jquery slideshow stop button

本文关键字：按钮 幻灯片 jQuery      更新时间：2023-09-26

每个人都知道如何在此代码中构建一个简单的停止按钮吗？该代码可能吗？

<div id="apDiv1">
  <ul id="exampleSlider">
    <li><img src="Images/A01.jpg" alt="" width="1049" height="768" /></li>
    <li><img src="Images/A05.jpg" alt="" width="1049" height="768" /></li>
    <li><img src="Images/A02.jpg" alt="" width="1049" height="768" /></li>
    <li><img src="Images/A03.jpg" alt="" width="1049" height="768" /></li>
    <li><img src="ImagesA04.jpg" alt="" width="1049" height="768" /></li>
  </ul>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    $(function () {
    /* SET PARAMETERS */
    var change_img_time     = 6000; 
    var transition_speed    = 600;
    var simple_slideshow    = $("#exampleSlider"),
        listItems           = simple_slideshow.children('li'),
        listLen             = listItems.length,
        i                   = 0,
        changeList = function () {
            listItems.eq(i).fadeOut(transition_speed, function () {
                i += 1;
                if (i === listLen) {
                    i = 0;
                }
                listItems.eq(i).fadeIn(transition_speed);
            });
        };
    listItems.not(':first').hide();
    setInterval(changeList, change_img_time);
});
</script>

我尝试使用 jquery 在以下 URL 为您创建一个示例演示。

http://jsfiddle.net/codebombs/ukNmT/

请检查并根据您的需要进行修改。

//To store timeout id
var timeoutId;
var slideImage = function( step ) {
    if ( step == undefined ) step = 1;
    //Clear timeout if any
    clearTimeout ( timeoutId );
    //Get current image's index
    var indx = $('.item:visible').index('.item');
    //If step == 0, we don't need to do any fadein our fadeout
    if ( step != 0 ) {
       //Fadeout this item
       $('.item:visible').fadeOut();
    }
    //Increment for next item
    indx = indx + step ;
    //Check bounds for next item
    if ( indx >= $('.item').length ) {
        indx = 0;
    } else if ( indx < 0 ) {
        indx = $('.item').length - 1;
    }
    //If step == 0, we don't need to do any fadein our fadeout
    if ( step != 0 ) {
       //Fadein next item
       $('.item:eq(' + indx + ')').fadeIn();
    }
    //Set Itmeout
    timeoutId = setTimeout ( slideImage, 5000 );
};
//Start sliding
slideImage(0);
//When clicked on prev
$('#prev').click(function() {
    //slideImage with step = -1
    slideImage ( -1 );   
});
//When clicked on next
$('#next').click(function() {
     //slideImage with step = 1
     slideImage ( 1 );
});
//When clicked on Pause
$('#pause').click(function() {
   //Clear timeout
   clearTimeout ( timeoutId );    
    //Hide Pause and show Play
    $(this).hide();
    $('#play').show();
});
//When clicked on Play
$('#play').click(function() {
   //Start slide image
   slideImage(0);
   //Hide Play and show Pause
   $(this).hide();
   $('#pause').show();    
});
相关文章：