我已经获得了以下代码。我用它来使用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">
它所做的一切都是使用&#39; rel&#39;填写该1个点并自动填写代码中的其余部分。
<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>
答案 0 :(得分:1)
function populateWord() {
var src = 'images/'+$sli.eq(c).find("img").attr("rel")+'.png';
$wrd.html('<img class="something" src="'+src+'">');
}