Question

我有一个幻灯片，可以通过计时器自动转换到下一张图片，但我希望通过暂停添加更多功能，也可以转到下一张或上一张图片。我对如何添加这些事件处理程序感到困惑？

＆＃13;

$(document).ready(function() {
	var nextSlide = $("#slides img:first-child");
	var nextCaption;
	var nextSlideSource;
		
	// the function for running the slide show
    var runSlideShow = function() {   
       	$("#caption").fadeOut(1000);
       	$("#slide").fadeOut(1000,
       		function () {
       	     	if (nextSlide.next().length == 0) {
					nextSlide = $("#slides img:first-child");
				}
				else {
					nextSlide = nextSlide.next();
				}
				nextSlideSource = nextSlide.attr("src");
				nextCaption = nextSlide.attr("alt");
				$("#slide").attr("src", nextSlideSource).fadeIn(1000);					
				$("#caption").text(nextCaption).fadeIn(1000);
			}
		)
	}
	
	// start the slide show
	var timer = setInterval(runSlideShow, 3000);
	
})

＆＃13;

body {
    font-family: Arial, Helvetica, sans-serif;
    width: 380px;
    margin: 0 auto;
    padding: 20px;
    border: 3px solid blue;
}
h1, h2, ul, p {
	margin: 0;
	padding: 0;
}
h1 {
	padding-bottom: .25em;
	color: blue;
}
h2 {
	font-size: 120%;
	padding: .5em 0;
}
img {
	height: 250px;
}
#slides img {
	display: none;
}
#buttons {
	margin-top: .5em;
	text-align: center;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>Xochitl Menjivar</title>
    <link rel="stylesheet" href="main.css">
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="slide_show.js"></script>
</head>

<body>
<main>
    <h1>Fishing Slide Show</h1>
    <h2 id="caption">Casting on the Upper Kings</h2>
    <img id="slide" src="images/casting1.jpg" alt="">
    <div id="slides"> 
        <img src="images/casting1.jpg" alt="Casting on the Upper Kings">
        <img src="images/casting2.jpg" alt="Casting on the Lower Kings">
        <img src="images/catchrelease.jpg" alt="Catch and Release on the Big Horn">
        <img src="images/fish.jpg" alt="Catching on the South Fork">
        <img src="images/lures.jpg" alt="The Lures for Catching">
    </div>
    <div id="buttons">
    	<input type="button" id="prev" value="Previous" disabled>
    	<input type="button" id="play" value="Pause">
    	<input type="button" id="next" value="Next" disabled>     	
    </div>
</main>
</body>
</html>

＆＃13;

Answer 1

工作fiddle

对于播放/暂停，你可以这样做

$('#play').on('click', function(e){
    e.preventDefault();
    isPaused = !isPaused;

    if(isPaused){
        $('#play').val('Play');
        window.clearInterval(timer);
    } else {
        $('#play').val('Pause');
        timer = setInterval(runSlideShow, 3000)
    }
})

声明用于跟踪播放/暂停状态的变量。当它处于暂停状态时，清除timer间隔，如果状态为播放，则再次设置间隔timer。

另外，您可以在runSlideShow()函数

中添加此标志

var runSlideShow = function() {
    if(!isPaused){
        $("#caption").fadeOut(1000);
        $("#slide").fadeOut(1000,
            function () {
                findNextSlide()
                nextSlideSource = nextSlide.attr("src");
                nextCaption = nextSlide.attr("alt");
                $("#slide").attr("src", nextSlideSource).fadeIn(1000);                  
                $("#caption").text(nextCaption).fadeIn(1000);
            }
        )
    }
}

点击事件会很短。

$('#play').on('click', function(e){
    e.preventDefault();
    isPaused = !isPaused;
})

对于下一张幻灯片的一个选项，只需清除并启动runSlideShow，它将自动强制获取包含所有效果的新幻灯片。

显示上一张幻灯片，您可以使用相同的逻辑，而不是查找下一张幻灯片，只需查看上一张幻灯片。 jQuery的函数.prev()与.next()

相反

修改

function findPreviousSlide(){ if (nextSlide.prev().length == 0) { nextSlide = $("#slides img:last-child"); } else { nextSlide = nextSlide.prev(); } }

如何使用jQuery将下一个和上一个按钮添加到我的幻灯片？

1 个答案: