Question

这就是我所拥有的：

HTML：

<head>
    <title>JQuery demo</title>
    <script type="text/javascript" src="scripts/jQuery.js"></script>
    <script type="text/javascript" src="scripts/slider.js"></script>
    <link rel="Stylesheet" type="text/css" href="styles/style.css"/>
</head>
<body>
    <div id="slider">
        <img class="image" src="images/image1.jpg" alt="image"/>
        <div class="title">Title1</div>
        <div class="bulletContainer">
            <div class="bullet active"></div>
            <div class="bullet"></div>
            <div class="bullet"></div>
            <div class="bullet" style="clear: right;"></div>
        </div>
        <div class="caption">Subtitle1</div>
    </div>
</body>

CSS：

body { 
    font-family:Tahoma;
    background-color: gray; 
}
#slider {
    width: 733px;
    height: 395px;
    margin: 50px auto 0 auto;
    background-image: url("../images/billboards-bg.png");
    background-repeat: no-repeat;
}
#slider > .image {
    margin: 10px 6px 2px 6px;
}
#slider > .title {
    float:left;
    color: #5D5B5B;
    margin-left: 7px;
    font-size: large;
    font-weight: bold;
}  
#slider > .bulletContainer {
    float:right;
    width: 100px;
    height: 20px;
    margin-right: 7px;
}
#slider > .caption {
    clear:both;
    margin-left: 7px;
    padding-top: 2px;
}
#slider > .bulletContainer > .bullet {
    width:20px;
    height: 20px;
    background-image:;
    margin: 2px;
    float:left;
    background-image: url("../images/billboard-pager.png");
    background-position:  0 0;
} 
#slider > .bulletContainer > .bullet:hover {
    cursor: pointer;
    background-position:  0 -20px;
}
#slider > .bulletContainer > .bullet.active {
    cursor: pointer;
    background-position:  0 -40px;
}

最后主要的事情是：

$(document).ready(function() {
    $(".bullet").click(function() {
        $(".bullet.active").attr("class", "bullet");
        $(this).attr("class", "bullet active");
        setContent($(".bullet").index(this));
    });
    var images = ["images/image1.jpg", 
                  "images/image2.jpg", 
                  "images/image3.jpg",
                  "images/image4.jpg"];
    var titles = ["Title1", "Title2", "Title3", "Title4"];
    var subtitles = ["Subtitle1", "Subtitle2", "Subtitle3", "Subtitle4"]

    function setContent(index) {
        $(".image").fadeOut("fast", function() {
            $(this).attr("src", images[index]);
            $(".image").fadeIn("fast");
        });
    }
});

事情是我想改变图片时更改标题和字幕（标题），但我对如何做到这一点没有任何想法。

Answer 1

此处：http://jsfiddle.net/ubfLe/

更改功能setContent：

function setContent(index)
{
    $(".image").fadeOut("fast", function()        
    {
        $(this).attr("src", images[index]);
        $(".title").html(titles[index]);
        $(".caption").html(subtitles[index]);
        $(".image").fadeIn("fast");
    });
}

Answer 2

Id将淡入淡出和淡出速度切换为毫秒而不是快或慢。

让我们假装您使用以下内容......

$(".image").fadeOut(1000, function()        
    {
        $(this).attr("src", images[index]);
        $(".image").fadeIn(1000);
    });

然后，您可以创建一个代码，在触发器后检查索引，并用新索引替换标题/副标题。

$(".bullet").click(function(){
    setTimeout(function(){
        $(".title").html(titles[$.inArray($(".image").attr("src"), images)]);
    }, 1000);
});

但这只是我。我没有对此进行测试，因为我有点紧张，但是如果它不起作用的话会很糟糕。如果有帮助，请告诉我。

编辑幻灯片

2 个答案: