编码幻灯片

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"); 
     }); 
    } 
});

事情是我想改变标题和字幕（标题）相同的时候改变图片，但我没有丝毫的想法如何做到这一点。

来源

2014-02-26 Mario

将Title1和Subtitle1更改为您要显示的文字。 – Howli

这里：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"); 
    }); 
}

来源

2014-02-26 22:22:39 Ani

thx，帮了很多 – Mario

可以做到这些每个图片都是链接到其他页面吗？ – Mario

是offcourse ...... – Ani

标识切换淡入淡出和速度，以毫秒为单位，而不是快或慢。

让假装您使用以下...

$(".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); 
});

虽然这只是我。我没有测试这个，因为我时间有点紧张，但如果它不起作用，它会在晚些时候被病毒清理干净。让我知道它是否有帮助。

来源

2014-02-26 22:31:25

好吧，试试吧，让我在谈论它时问你一个问题。告诉我，我必须添加什么，以便图片在页面加载时滑动？ – Mario

嗯。如果我没有理解你的目标，你可以替换$（“子弹头”）。单击以$（文件）。就绪但如果你这样做，我建议你使它成为一个功能来代替。然后，你可以呼吁$（文件）的功能。就绪，也可以把它放在一个触发器，以及（如$（“子弹头”）。点击）我做了一个小提琴为你提供帮助。 [小提琴这里（http://jsfiddle.net/hTZWq/1/）我做了它，以便它触发负载（一次），然后让你去改变它的点击。我还引入了一个评论，告诉你如何在定时后继续触发它，但如果你这样做，则查找清楚的setInterval。 –

这对我来说有点困惑，事情是我想让它自己滑动。不只是当我按一下按钮 – Mario

回答

相关问题