3

私はこのような動作するスクリプトを持っています：

jQuery(document).ready(function(){

    $('.video-thumb img').bind('mouseover',function(){
        var new = $(this).attr('src').replace(/default.jpg/,'1.jpg');
        $(this).attr('src',new);
    }).bind('mouseout',function(){
        var default = $(this).attr('src').replace(/[0-9].jpg/,'default.jpg');
        $(this).attr('src',default);
    });

});

ええ、あなたは正しいと思いました。YouTubeのサムネイルを定期的に変更するように作られています。ただし、間隔を作成する方法がわかりません。これで、サムネイルが別のサムネイルである1.jpgに変更されますが、次に画像が1秒で2.jpgに変更されます。

スニペット全体はおそらく最初から作成する必要があります。助言？

あなたが理解したことを願っています:-D

編集：私はフィンランド語から変数名を変更しました、私はそれらを使用しません。この例では。

マルティ・レイン

4

4 に答える 4

8

newとdefaultは、javascriptの予約語です。使用できません。

間隔を作成するには、次を使用する必要がありますsetInterval。

setInterval(function() {
  // do something
  // ...
}, 1000); // <- 1000ms = 1s

[実際に見てください]

jQuery(document).ready(function() {

    var timer, imgsrc, cnt = 0;

    $('.video-thumb img').bind('mouseover', function() {

      // if there is no timer
      if (!timer) {

        var $t = $(this);

        // get the image src
        imgsrc = $t.attr('src').replace('default.jpg','');

        // start a new timer
        timer = setInterval(function() {

          // periodically change the src
          $t.attr('src', imgsrc + (cnt+1) + ".jpg");

          // and adjust the counter
          cnt = ( cnt + 1 ) % 3; // 0, 1, 2

        }, 1000); // <- 1000ms = 1s
      }
    }).bind('mouseout',function() {

      // stop rotation
      if (timer) {
        clearInterval(timer);
        timer = null;
      }

      // set the default img
      $(this).attr('src', imgsrc + 'default.jpg');
    });
});
于 2010-07-05T20:05:20.263 に答える
3

ここで私の答えが機能しているのを見ることができます：

HTML

<div class="video-thumb"> 
    <img src="http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg" />
</div>
<div id="counter">0</div>​

JavaScript

$(document).ready(function() {

    var images = [];

    images[0] = "http://i2.ytimg.com/vi/Q1yo3mco40U/default.jpg";
    images[1] = "http://i2.ytimg.com/vi/ivmoCcYLrEk/default.jpg";
    images[2] = "http://i3.ytimg.com/vi/f7d8luQ6p2Q/default.jpg";
    images[3] = "http://i1.ytimg.com/vi/XzFmOKNf8sc/default.jpg";
    images[4] = "http://i2.ytimg.com/vi/-2m1e4g2MFM/default.jpg";
    images[5] = "http://i1.ytimg.com/vi/lK2TSYBh7fw/default.jpg";

    var loop;
    var i = 0;

    var counter = $("#counter");

    $('.video-thumb img').mouseover(function() {
        var image = this;
        loop = setInterval(function() {
            if (i < images.length - 1) {
                i++;
                $(image).attr('src',images[i]);
            } else {
                i = 0;
                $(image).attr('src',images[i]);
            } 
            counter.html(i);
        }, 1000); 

    }).mouseout(function() {
        clearInterval(loop);
        i = 0;
        $(this).attr('src', images[i]);
        counter.html(i);
    });

});
于 2010-07-05T21:11:04.733 に答える
0

素晴らしい答えをありがとう！（残念ながら）残念ながら、私はすでにjQueryのTimers-pluginを介してこれを作成しました。これが私の作業コードです：

$j(document).ready(function(){

    $j('.video-thumb img').bind('mouseover',function(){
        var c = 1;
        $j(this).everyTime(1000,'interval',function(i){
            $j(this).attr('src',$j(this).attr('src').replace(/(default|[0-9]).jpg/,c+'.jpg'));
            if(c<3) {
                c++;
            } else {
                c = 1;
            }
        });
    }).bind('mouseout',function(){
        $j(this).attr('src',$j(this).attr('src').replace(/(default|[0-9]).jpg/,'default.jpg'));
        $j(this).stopTime('interval');
    });

});
于 2010-07-06T05:36:08.087 に答える
0 
 var newImg = $(this).attr('src').replace(/default.jpg/,'1.jpg');
 $(this).attr('src',newImg);
 window.setTimeout(function(){
     newImg = $(this).attr('src').replace(/1.jpg/,'2.jpg');
     $(this).attr('src',newImg);
 },1000);
于 2010-07-05T20:06:42.520 に答える