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

/ ***FreeBSDライセンスの下でJonRaasch（jonraasch.com）によってリリースされた単純なjQueryスライドショースクリプト：自由に使用または変更でき、何の責任も負いません。気に入った場合は、私にリンクしてください:) *** / 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）;}）;

/ *画像に合わせて幅と高さを設定します**/

スライドショー{位置：相対; 高さ：350px; 幅：500px; マージン：0自動; }

スライドショーDIV{position：absolute; top：0; 左：0; z-index：8; 不透明度：0.0; 高さ：400px; 背景色：#FFF; 最小幅：

100％; フィルタ：alpha（opacity = 0）; }

スライドショーDIV.active{

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

スライドショーDIV.last-active{

z-index:9; }

スライドショーDIVIMG{高さ：350px; 表示ブロック; ボーダー：0; margin-bottom：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 install) を確認してください。何かを簡単にテストしたい場合は、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 に答える