javascript - 如何创建第二张图像而不是填充为单词

Question

我有下面的代码。我用它来使用 1 个图像，并使用“rel”和“title”标签来填充单词以与实际图像一起使用。这创建了一个类似横幅的系统，使用文本而不是所有图像。现在，我想做的是使用“rel”标签来填充图像；但是，不知道如何修改此 JavaScript 代码来执行此操作。

<img title="This is a title that will appear as text above the image" rel="image1" alt="SEO Image 1" src="../images/backdrop2.png">

如您所见，rel 等于 image1...所以它需要做的是使用它来制作...

<img class="something" src="images/image1.png">

它所做的就是使用“rel”中的单词来填充第一个位置，并自动填充代码中的其余部分。

<script type="text/javascript">
  jQuery(function( $ ){

    var efx  = "fade", // "slide" || "fade"
            animationTime = 600,
            pauseTime = 4000,
      $gal = $("#images_holder"),
        $mov = $("#moving_part"),
        $sli = $mov.find("> div"),
        $btn = $("#prev, #next"),
            $dsc = $("#description"),
            $wrd = $("#word"),
            w = $gal.width(),
            n = $sli.length,
            c = 0,  // Counter // Start index
            itv;    // Interval


    // SETUP (fade or slide?)
    $mov.width(w*n);
    if(efx==="fade") $sli.css({position:"absolute", left:0}).fadeOut(0).eq(c).fadeIn(0);

    function populateWord() {
        $wrd.text( $sli.eq(c).find("img").attr("rel") );
    }   

    function populateDescription() {
        $dsc.text( $sli.eq(c).find("img").attr("title") );
    }

    function anim() {
        c = c<0 ? n-1 : c%n; // loop-back if exceedds
        populateDescription();
        populateWord();
        if (efx==="fade") {
            $sli.fadeOut(animationTime).eq(c).stop().fadeIn(animationTime);
        }else if(efx==="slide") {
            $mov.stop().animate({left: -c*w});
        }
    }

    function auto() {
        itv = setInterval(function(){
           ++c;
           anim();
        }, pauseTime);
    }

    function pause() {
        return clearInterval( itv );
    }

  $gal.hover(pause, auto);

    $btn.on("click", function(){
        c = this.id==="next" ? ++c : --c;
        anim();
    });


    populateDescription();
    populateWord();
    auto();

  });
</script>

Answer 1

function populateWord() {
    var src = 'images/'+$sli.eq(c).find("img").attr("rel")+'.png';
    $wrd.html('<img class="something" src="'+src+'">');
}