編碼幻燈片

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

回答

相關問題