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响应式可点击图片幻灯片

回答

相关问题