これは私のjqueryコードの一部です:
jQuery(document).ready(function() {
var timer, imgsrc, cnt = 1;
$('.post-image img').bind('mouseover', function() {
// if there is no timer
if (!timer) {
var $t = $(this);
var site = $(this).next('.sourcesite').val(); //$(this)>("sourcesite").html();
var dd = $(this).children('div.dd'); //$(this)>("dd");
// get the image src
imgsrc = $t.attr('src') //;.replace('default.jpg','');
imgReverse = imgsrc.split("").reverse().join(""); // get the image src
// var site="al";
if (site == 'al') {
imgSlash = imgReverse.indexOf('/');
imgDot = imgReverse.indexOf('.');
imgID1 = imgReverse.substr(imgDot + 1, imgSlash - imgDot - 1);
imgID = imgID1.split("").reverse().join("");
} /*getting image name finished for "al"*/
if (site == 'bg') {
imgSplitDot = imgReverse.split('.');
imgID = imgSplitDot[1];
}
dd.html(site);
// get the image src
imgsrc = $t.attr('src').replace(imgID + '.jpg', '');
// start a new timer
timer = setInterval(function() {
// periodically change the src
$t.attr('src', imgsrc + cnt + ".jpg");
// and adjust the counter
cnt = (cnt + 1); //% 3; // 0, 1, 2
if (cnt == 21) {
cnt = 1;
}
}, 700); // <- 1000ms = 1s
}
}).bind('mouseout', function() {
// stop rotation
if (timer) {
clearInterval(timer);
timer = null;
cnt = 0;
}
// set the default img
$(this).attr('src', imgsrc + imgID + '.jpg');
});
});
そして、これは私のHTMLです:
<div class="post-image">
<a class="" href="index2.php?vid=php_id&name=name" title="php_name">
<img width="180" height="135" src="php_imgsource" class="attachment" alt="" title=""/>
</a>
<div class="sourcesite">php_sourcesite</div>
<div class="dd">0</div>
</div>
にマウスオーバーするdivと、画像が 1 つずつ変化します。例: http://jsfiddle.net/YkuXt/1/
しかし、私のページにはさまざまな画像の src があるため、この jquery コードでは if を使用しています。私は<div class="sourcesite"></div>PHPコードでソース名を入力しています.jqueryでソースサイトの値を取得し、サンプルのようにifを使用したいです。「al」の場合は一部のコード部分が機能しますが、「bg」の場合は他の部分が機能します。画像ソースが違うので。そして、画像ソースのサンプルがあります:
サンプル 2: samplesites.com/img/5.jpg
「1」や「5」などの画像名を取得する必要があります。1 を見つけたら、タイマーで 1 つずつインクリメントし、マウスオーバーで画像が変更されます。
皆さんありがとう。