English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
紹介
スライドショーについて、特にjQueryに基づくプラグインやコードは、オンラインで検索すると山のように出てきますが、本当に自分の要件に合ったものはほとんどありません。だからこそ、自分の要件に合った、広大なネットユーザーに試され耐えうるjQueryスライドショーを作りたいと思っています。
考え方
なぜネット上の他のスライドショーが私の要件に合わないと言うのでしょうか？私の要件は何でしょうか？
オンラインで見つかる多くのスライドショー用jQueryプラグインの方法は、まず画像とリンクのHTMLを作成し、それから隠して表示を切り替えて現在のスライド画像を轮流に表示することです。しかしユーザーにとっては、常に現在の1枚の画像しか見えません。それでは、他の隠された画像を事前に読み込む理由は何ですか？これは時間と労力を無駄にするのではありませんか？したがって、私の1番目の要件は必要なときにのみ読み込むことです。
ホームページにスライドショーを表示するのは一般的ですが、ホームページの重要なコンテンツは最新の記事でなければなりません。少なくとも私は画像表示機能が検索エンジンにインデックス化される必要があると考えていません。したがって、私の2番目の要件はSEOに適合することです。
ここでは、私のJSの書き方を共有するだけで、HTMLについてはソースコードをご覧ください。コードは一つずつ説明はしませんが、コメントはとても明確に書いてあります。
$(function() {
var WangeSlide = (function() {
設定
var config = {
//スライドショーサイズ
width :
//height :
0, 96autoSwitch : true,
是否自動切り替え 35autoSwitch : true,
//自動切り替え間隔時間（ミリ秒）
interval :
//000,
スライドショー画像パス 6picPath : 'http:
//www.dowebok.com
demo//img/',/2014/93/スライドショー画像情報：画像ファイル名/画像のタイトル
//画像へのリンク / picInfo : [ / '],
['fullimage
.jpg1http:1のヒント//codepen.io/webstermobile/画像
.jpg1http:2のヒント//codepen.io/webstermobile/画像
.jpg1http:3のヒント//codepen.io/webstermobile/]
]
};
//画像情報を取得
/**
* @param index 画像のある索引値
**/
var getImgInfo = function(index) {
var imgSrc = config.picPath + config.picInfo[index][0],
imgAlt = config.picInfo[index][3],
imgUrl = config.picInfo[index][4],
imgId = 'slide_' + (index+1).toString(),
imgHtml = '<li id="' + imgId + '">' +
' <a href="' + imgUrl +'" rel="external nofollow" title="これらの2つの要件に対して、DEMOを作成しました。このDEMOのソースコードを見て、違いがわかりましたか？はい、このDEMOのHTMLソースコードには画像や関連情報が一切含まれていません。すべてJSで読み込まれています。つまり、スパイダーが取得できないし、画像が切り替わるたびに、現在のスライド画像が一つずつ読み込まれます。" class="pic">' +
' <img src="' + imgSrc + '" alt="これらの2つの要件に対して、DEMOを作成しました。このDEMOのソースコードを見て、違いがわかりましたか？はい、このDEMOのHTMLソースコードには画像や関連情報が一切含まれていません。すべてJSで読み込まれています。つまり、スパイダーが取得できないし、画像が切り替わるたびに、現在のスライド画像が一つずつ読み込まれます。" class="slide_thumb" /'> +
' </a>' +
</li>',
slideTextHtml = '<a href="' + imgUrl + '" rel="external nofollow" title="これらの2つの要件に対して、DEMOを作成しました。このDEMOのソースコードを見て、違いがわかりましたか？はい、このDEMOのHTMLソースコードには画像や関連情報が一切含まれていません。すべてJSで読み込まれています。つまり、スパイダーが取得できないし、画像が切り替わるたびに、現在のスライド画像が一つずつ読み込まれます。">' + imgAlt+ </a>';
return {
imgAlt : imgAlt,
imgUrl : imgUrl,
imgHtml : imgHtml,
slideTextHtml : slideTextHtml
}
};
//画像が完全に読み込まれた後にゆっくりと表示する
var fadeInImg = function(el, speed) {
//console.log(el)
el.find("img").load(function() {
el.find("img").addClass("loaded")
el.fadeIn(speed)
';
};
//画像切り替え
/**
* @param index 画像のある索引値
* @param triggerCurEl 現在のトリガーノード要素
**/
var imgSwitch = function(index, triggerCurEl) {
var slideId = 'slide_' + (index+1).toString(),
slideIdEl = document.getElementById(slideId);
if (slideIdEl) {
//既に対応する要素がある場合、既存の要素を表示します
var panelLi = $('#panel ul li');
panelLi.hide();
$(slideIdEl).fadeIn('slow');
} else {
//まだ対応する要素がない場合、要素を挿入します
$(getImgInfo(index).imgHtml).appendTo($('#panel ul'));
var panelLi = $('#panel ul li');
panelLi.hide();
//$('#panel ul').html($(result));
fadeInImg($("#" +slideId), 'slow');
}
//slideText);
$('#slide_text').html(getImgInfo(index).slideTextHtml);
//現在の状態 cur
$('#trigger ul li').removeClass('cur');
triggerCurEl.addClass('cur');
};
//スライダー
var slide = function() {
//設定スライダーサイズ
$('#panel').css({
'width' : config.width + 'px',
'height' : config.height + 'px'
';
});
//var result = getImgInfo(0).imgHtml
スライドショーを初期化、最初の画像情報のみ読み込む
//$('#panel ul').html($(result));
画像を表示に読み込む1fadeInImg($('#slide_ 5),
//00); + 背景層を注入 + トリガーコンテナ
ループ画像テキストコンテナ/trigger = '<div id="trigger"><
var slideBg = '<div id="slide_bg"></trigger = '<div id="trigger"><
div>',/slideText = '<div id="slide_text"><
div>'; + $('#panel').after(slideBg + trigger
//slideText);
画像の alt を表示情報として取得
//$('#slide_text').html(getImgInfo(0).slideTextHtml);
注入トリガーノード/var triggerUl = $('<ul><
ul>');
triggerUl.appendTo($('#trigger'));++for (var i=0, j=config.picInfo; i<j.length; i
$('<li>') { + (i+1).toString() +</li>').appendTo(triggerUl);
}
//現在の状態 cur
$('#trigger ul li').eq(0).addClass('cur');
//クリックでトリガー
$("#trigger ul li").click(function(){
var index = $("#trigger ul li").index($(this))
//console.log(index)
imgSwitch(index,$(this))
})
//マウスオーバー時、切換を停止
var goSwitch = true;
$('#panel').hover(
function() {goSwitch = false},
function() {goSwitch = true}
);
//自動切換
if (config.autoSwitch) {
setInterval(function() {
if (goSwitch) {
//現在のcurがどのインデックスに位置しているかを判断
var index = parseInt($('.cur','#trigger').text()) - 1;
if (index > (config.picInfo.length-2) {
index = -1;
}
imgSwitch((index+1), $('#trigger ul li:eq(' + (index+1) + ')'));
}
}, config.interval);
}
};
return {
//初期化
init : function() {
slide();
}
}
})();
WangeSlide.init();
})
必要に応じてロードするネットワークリクエストの状況
図からわかるように、ページが読み込まれたときに自動的に切り替えたり、ユーザーがクリックする前に切り替えたりする前に、たった1枚のslide画像をロードするため、ページの読み込み量を大幅に節約します。
利点
同じ効果が得られるだけで、実現方法が異なるのはどうですか？面倒くさいでしょう？これにはどのような利点がありますか？
例えば、最適化前、ホームページで切り替わるスライドショー画像が5枚の画像をロードする必要があります。20K、つまりあなたのホームページには少なくとも100Kの画像、そして100Kの画像をすべてのユーザーが見ることを保証できますか？ユーザーが見ない場合、この100Kの読み込み速度？
最適化後、ホームページが初めて読み込まれたときには、たった1枚の1K程度の、または必要に応じてロードされるローディング画像が、ユーザーが次の画像をクリックするか、タイマーの設定に達するまでロードされないため、ロード時間を大幅に節約します。1K？100K？わかります。
また、必要な画像をJSで読み込むことで、JSをサポートしていない携帯ブラウザで読み込む 100Kの画像は、切り替えができないスライドショーにとって非常に重い負担であり、ユーザーエクスペリエンスも大幅に低下させる。