Question

我正在使用jquery工具构建滑块..这是我的代码http://jsfiddle.net/SmW3F/5/

无论如何，问题是当您对图像进行更新（主图像）时，每个拇指都会在悬停时更新主图像。

问题是标题只适用于第一项......所有其他项目都没有更新标题..

这是代码的这一部分

var root = $(".scrollable").scrollable({circular: false}).autoscroll({ autoplay: true });

$(".items img").on("hover",function() {
    // see if same thumb is being clicked
    if ($(this).hasClass("active")) { return; }

    // calclulate large image's URL based on the thumbnail URL (flickr specific)
    var url = $(this).attr("src").replace("_t", "");
    var tbtit = $("#tbtit").html();
    var tbdesc = $("#tbdescp").html();

    // get handle to element that wraps the image and make it semi-transparent
    var wrap = $("#image_wrap").stop(true, true).fadeTo("medium", 0.5);

    // the large image from www.flickr.com
    var img = new Image();


    // call this function after it's loaded
    img.onload = function() {

        // make wrapper fully visible
        wrap.fadeTo("fast", 1);

        // change the image
        wrap.find("img").attr("src", url);
        wrap.find(".img-info h4").replaceWith(tbtit);
        wrap.find(".img-info p").replaceWith( tbdesc);

    };

    // begin loading the image from www.flickr.com
    img.src = url;

    // activate item
    $(".items img").removeClass("active");
    $(this).addClass("active");

// when page loads simulate a "click" on the first image
}).filter(":first").trigger("mouseover");

var count = 0;
var scroll_count = 0;
setInterval(function(){
    count++; // add to the counter
    if($(".items img").eq(count).length != 0){
        console.log(count);
        $(".items img").eq(count).trigger("mouseover");

        if(count % 5 === 0)
        {

Answer 1

我发现您的脚本存在一些问题，但首先您的页面中包含无效标记，因为您有多个<div>个元素具有tbtit和tbdescp的相同ID。 ID属性在HTML页面中应该是唯一的，因此应将其更改为类。

现在，在您的脚本中，您需要更改检索标题值的部分以及悬停的图像描述以引用同级元素：

//THIS
var tbtit = $("#tbtit").html();
var tbdesc = $("#tbdescp").html();

//SHOULD NOW BE THIS
var tbtit = $(this).siblings('.tbtit').text();
var tbdesc = $(this).siblings('.tbdescp').text();

最后，当您更新主图片的文字时，您要为<h4>和<p>标签设置内容而不是完全替换它们，因此请使用.text()

//THIS
wrap.find(".img-info h4").replaceWith(tbtit);
wrap.find(".img-info p").replaceWith( tbdesc);

//SHOULD NOW BE THIS
wrap.find(".img-info h4").text(tbtit);
wrap.find(".img-info p").text( tbdesc);

Javascript Slider标题替换html为标题只是在第一项上工作

1 个答案: