0

我完成了对我的网站的编码并将图像滑块添加到登录页面。我对 javascript 很陌生，所以我复制并粘贴了一个图像滑块演示，并根据我的需要对其进行了一些调整。我有 4 张图像每隔一段时间就会淡入下一张。我现在要做的是拥有它，这样当您单击任何图像时，自动播放幻灯片将暂停，然后您可以单击以恢复。我整天都在浏览论坛和教程，但我很迷茫。任何帮助将不胜感激。谢谢。

HTML

 <ul id="slider">
  <li><img src="images/img1.png"/></li>
  <li><img src="images/img2.png"/></li>
  <li><img src="images/img3.png"/></li>
  <li><img src="images/img4.png"/></li>
</ul>

JavaScript

<script>
$(function () {
    var change_img_time = 5000;
    var transition_speed = 100;
    var simple_slideshow = $("#slider"),
        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>
4

2 回答 2

2

尝试

$(function () {


    var change_img_time = 5000;
    var transition_speed = 100;

    var simple_slideshow = $("#slider"),
        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();
    var timer = setInterval(changeList, change_img_time);
    listItems.click(function () {
        if (timer) {
            clearTimeout(timer);
            timer = undefined;
        } else {
            timer = setInterval(changeList, change_img_time);
        }
    })
});

演示：小提琴

于 2013-10-31T03:35:18.710 回答
0

我尝试使用 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();    
});
于 2013-10-31T03:34:00.890 回答