ナビ付きスライドショー - jsdo.it - Share JavaScript, HTML5 and CSS
jQuery(function($){ $('div.slideimage').slide(); }); (function($){ $.fn.slide = function(options){ var defaults = { fadeTime: 1000, intervalTime: 3000, waitTime: 5000, window: true }; options = $.extend(defaults, options); return this.each(function(){ var current = 0; var interval = 0; var slides = new Array; var target = $(this).addClass('slideimage'); var navi = $('<ul>').addClass('slidenavi');
jQueryゼロから / ナビ付きスライドショー | ゆるぶ | ページ 682
前回のスライドショーによくあるナビつけてみることに。 任意の写真をクリックで選べるようにします。 ナビをクリックすると自動再生されてるアニメーション(フェードイン・フェードアウト)を停止して、指定のスライドを表示、しばらく放置すると自動再生再開するようにします。 アニメーションは setInterval で再生しているので、clearInterval にて停止するだけ。アニメーション再開は一定時間操作しない時間帯を持ちたいので setTimeout で待機するようにします。 var interval; // スライド再生 function startSlide(wait){ wait = wait | 0; var intervalTime = 3000; setTimeout(function(){ interval = setInterval(function(){ // アニメーショ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.sohtanaka.com/web-design/examples/image-slider/