0

我正在使用 Jon Raasch (http://jonraasch.com/blog/a-simple-jquery-slideshow) 的 Simple jQuery Slideshow Script 并且想知道如何让用户单击图像以转到下一个图像，同时还保持幻灯片的自动播放模式。第一次尝试建立网站，所以我对源代码/ css/jquery有非常基本的了解。

我是否也必须同时修改 js 文件和源代码？我将如何修改它？如果有人可以提供帮助，将不胜感激。

谢谢！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

xmlns="http://www.w3.org/1999/xhtml">

csutoras+liando

/*** 由 Jon Raasch (jonraasch.com) 在 FreeBSD 许可下发布的简单 jQuery 幻灯片脚本：免费使用或修改，不对任何事情负责，等等。如果你喜欢它，请给我链接 :) ***/ 功能slideSwitch() { var $active = $('#slideshow DIV.active'); 
if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

// use this to pull the divs in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow DIV:first');

// uncomment below to pull the divs randomly
// var $sibs  = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next  = $( $sibs[ rndNum ] );


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    }); }
$(function() { setInterval( "slideSwitch()", 5000 ); });

/ *设置宽度和高度以匹配您的图像 **/

幻灯片{位置：相对；高度：350 像素；宽度：500px；边距：0 自动；}

幻灯片DIV {位置：绝对；顶部：0；左：0；z-索引：8；不透明度：0.0；高度：400px；背景颜色：#FFF；最小宽度：

100%；过滤器：阿尔法（不透明度= 0）；}

幻灯片 DIV.active {

z-index:10;
opacity:1.0;  filter: alpha(opacity=100); }

幻灯片 DIV.last-active {

z-index:9; }

幻灯片DIV IMG {高度：350px；显示：块；边框：0；边距底部：10px；宽度：500px；}

测试

信息

    Caption for image 1   </div>

<div>
    <img src="../../Images/images/photo (9).jpg" alt="Slideshow Image 2" /></a>
    Caption for image 2   </div>

<div>
    <img src="../../Images/images/photo (8).jpg" alt="Slideshow Image 3" /></a>
    Caption for image 3   </div>


<div>
    <img src="../../Images/images/photo (7).jpg" alt="Slideshow Image 4" /></a>
    Caption for image 4
</div>
 </div>

 

关于

enter code here

4

1 回答 1

0

看起来他的布局只是执行 slideSwitch() 以前进到下一张幻灯片。但是，后台有一个正在运行的计时器；无限期地每 5 秒发射一次。您需要清除该超时并可能再次设置它。这是一般的想法：

// What you should already have:
$(function() {
    setInterval( "slideSwitch()", 5000 );
});

// what you need to change it into:
var intervalID = ""; // keep track of the timeout going on in the background so you can cancel it
$(function() {
    intervalID = setInterval( "slideSwitch()", 5000 );
});

// On any image that is clicked, execute the following
$("img").on("click", function() {
    clearInterval(intervalID); // stop the current slideshow changes
    slideSwitch(); // switch now
    intervalID = setInterval( "slideSwitch()", 5000); // set up the next change
});

有关 setInterval/clearInterval 的详细说明，请参阅这些讨论

更新：为了正确掌握您要进入的内容，请务必阅读 jQuery 的文档。有很多非常棒的教程，但jQuery 自己的页面也很有用。如果某些东西似乎没有按您的预期触发，请检查浏览器的“开发人员工具”（或 Firefox 的 firebug 安装）。您可以在代码中设置断点，以便在 javascript 执行时设置断点，或者如果您想简单地测试某些内容，可以在代码中执行 javascript 警报。

您可能需要在内部设置图像单击事件处理程序，$(document).ready(function() {...}以便它知道您的所有图像。jQuery的工作原理页面将非常有助于理解它的作用/可以做什么。

// make sure the page has been fully loaded when the following executes
$(document).ready(function() {
    // On any image that is clicked, execute the following
    $("img").on("click", function() {
        clearInterval(intervalID); // stop the current slideshow changes
        slideSwitch(); // switch now
        intervalID = setInterval( "slideSwitch()", 5000); // set up the next change
    });
});

一定要开始熟悉api；您会在.on()那里找到文档、选择器、如何获取DOM 元素的属性以及 jQuery 在 javascript 之上构建的所有其他内容。

大量阅读，但你会很高兴你花时间了解你试图运用的力量。

于 2012-05-16T17:37:22.007 回答