如何在jquery幻灯片中添加下一个图像的点击

时间：2012-05-16 17:26:16

标签： jquery slideshow

我正在使用Jon Raasch的简单jQuery幻灯片脚本（http://jonraasch.com/blog/a-simple-jquery-slideshow），并想知道如何让用户点击图片去到下一个图像，同时保持幻灯片显示的自动播放模式。第一次尝试构建一个网站，所以我对源代码/ 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” ＆GT;

     

csutoras +联东

                 / ***       简单的jQuery幻灯片脚本       由Jon Raasch（jonraasch.com）根据FreeBSD许可证发布：免费使用或修改，不对任何内容负责等。请链接   对我来说，如果你喜欢它:)   *** /      function 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）; }）;            

     

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

     

幻灯片放映{position：relative;高度：350像素;宽度：500px;保证金：0自动; }

     

幻灯片DIV {位置：绝对;顶部：0;左：0;的z-index：8;不透明度：0.0;身高：400px; background-color：#FFF;最小宽度：

     

100％; filter：alpha（opacity = 0）; }

     

幻灯片DIV.active {

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

幻灯片DIV.last-active {

z-index:9; }
     

幻灯片DIV IMG {身高：350px;显示：块;边界：0; margin-bottom：10px;宽度：500px; }

     

     

     

     

     

测试

info

     

                 

    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

1 个答案:

答案 0 :(得分：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的详细说明，请参阅these discussions

更新：为了正确掌握您的内容，请务必阅读jQuery的文档。有很多非常好的教程，但jQuery's own page也很有用。如果您希望某些内容似乎没有被触发，请检查您的浏览器的“开发人员工具”（或Firefox的firebug安装）。您可以在代码中为javascript执行时设置断点，或者如果您想简单地测试一些内容，则可以在代码中执行javascript警报。

您可能需要在$(document).ready(function() {...}中设置图片点击事件处理程序，以便它知道您的所有图片。 how jQuery works页面对于了解它能做什么/可以做什么非常有帮助。

// 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()在那里记录的内容，selectors，如何获得attributes of DOM elements，以及jQuery在javascript之上构建的所有其他内容。

很多阅读，但你会很高兴你花时间去理解你想要掌握的力量。

相关问题
最新问题