Jquery響應式可點擊圖片幻燈片

我是JS的新手，它一直是我學習的熊。我正在努力使用媒體查詢構建響應式網站。我想要一個可點擊的幻燈片，當您點擊三個縮略圖中的一個時，它會更改主要照片。Jquery響應式可點擊圖片幻燈片

我決定保持幻燈片簡單。我有一個主圖像和三個縮略圖下面的div。當我點擊一個縮略圖時，我希望mainPhoto div類更改爲不同的類，其中background-image。我使用jquery .on("click",函數和.addClass在單擊其中一個縮略圖時更改div類。我這樣做是因爲我要使用媒體查詢。如果屏幕更小或更大，我所調用的div類將具有不同的背景圖像以適應更大或更小的窗口。我還沒有添加@media代碼。但最終我會根據某些屏幕尺寸爲每個班級設置不同的背景圖片。

現在我只想保持簡單並創建首先工作的腳本。我的問題是，當我點擊縮略圖時，它只能運行一次，並且只在thumbnailTwo之前單擊thumbnailThree我無法單擊其他縮略圖。我希望能夠按照我的意願點擊所有三個金錢時間。也許有一個更簡單的方法來做到這一點，但我是JS和jQuery的新手。下面是我的代碼：

<style> 
    body { 
    margin: 0; 
    padding: 10px; 
    font-size: 16px; 
    color: #000000; 
    background-color: #fff; 
    } 
    h1 { 
    font-size:1.5em; 
    } 
    .wrap { 
    position: relative; 
    margin: 0 auto; 
    padding: 0; 
    width: 800px; 
    } 
    #mainDiv { 
    float: left; 
    width: 800px; 
    background-color:#888; 
    } 
    .mainPhoto { 
    float: left; 
    width: 800px; 
    height: 600px; 
    background-image: url(images/mainPhoto); 
    background-repeat:no-repeat; 
    } 
    .mainPhotoTwo { 
    background-image:url(images/mainPhotoTwo); 
    } 
    .mainPhotoThree { 
    background-image:url(images/mainPhotoThree); 
    } 
    #secondaryDiv{ 
    float:left; 
    width: 780px; 
    margin:0; 
    padding:10px; 
    font-size: .9em; 
    color: #fff; 
    background-color: #333; 
    } 
    #thumbOne { 
    float:left; 
    width:250px; 
    height:250px; 
    margin:10px 0px 0px 0px; 
    padding:0; 
    background-image:url(images/thumbOne); 
    background-repeat:no-repeat; 
    } 
    #thumbTwo { 
    float:left; 
    width:250px; 
    height:250px; 
    margin:10px 0px 0px 10px; 
    padding:0; 
    background-image:url(images/thumbTwo); 
    background-repeat:no-repeat; 
    } 
    #thumbThree { 
    float:left; 
    width:250px; 
    height:250px; 
    margin:10px 0px 0px 10px; 
    padding:0; 
    background-image:url(images/thumbThree); 
    background-repeat:no-repeat; 
    } 
    .clearDiv{ 
    clear:both; 
    line-height:1px; 
    } 
</style> 
</head> 
<body> 
    <div class="wrap"> 
    <div class="mainPhoto"> 
    </div> 
    <div id="secondaryDiv"> 
     <h1>Title Test</h1> 
     <p>A paragraph of text</p> 
     <div id="thumbOne"></div> 
     <div id="thumbTwo"></div> 
     <div id="thumbThree"></div> 
     <div class='clearDiv'></div> 
    </div> 
    </div> 
</body> 
<script> 
    $(document).ready(function(){ 
    $('#thumbOne').on("click", function(){ 
     $('div.mainPhoto').addClass('mainPhoto'); 
    }); 
    }); 
    $(document).ready(function(){ 
    $('#thumbTwo').on("click", function(){ 
     $('div.mainPhoto').addClass('mainPhotoTwo'); 
    }); 
    }); 
    $(document).ready(function(){ 
    $('#thumbThree').on("click", function(){ 
     $('div.mainPhoto').addClass('mainPhotoThree'); 
    }); 
    }); 
</script>

來源

2013-10-17 Charlie

顯示我改變它，請在的jsfiddle，在ordet捉蟲更快。 –

在這裏你去：http://jsfiddle.net/JQ7Rk/

的問題.addClass不停類黏合到您的DIV，而不是取代它們。一旦它加入所有三個類，.addClass停止添加它們（因爲它們已經在！）。因此，使它成爲最後一個永久！

編輯：哦，我差點忘了。我沒有你的照片，所以我用可愛的貓咪代替了它們。

我決定在香草JS

$(document).ready(function(){ 
    $('#thumbOne').on("click", function(){ 
     var main = document.getElementById("mainPhoto"); 
     main.className = "mainPhoto"; 
    }); 
    }); 

    $(document).ready(function(){ 
    $('#thumbTwo').on("click", function(){ 
     var main = document.getElementById("mainPhoto"); 
     main.className = "mainPhoto mainPhotoTwo"; 
    }); 
}); 

    $(document).ready(function(){ 
    $('#thumbThree').on("click", function(){ 
     var main = document.getElementById("mainPhoto"); 
     main.className = "mainPhoto mainPhotoThree"; 
    }); 
    });

來源

2013-10-17 20:51:21

非常感謝！這正是我正在尋找的 – Charlie

Jquery響應式可點擊圖片幻燈片

回答

相關問題