Jquery 响应式可点击图片幻灯片答案

【问题标题】：Jquery responsive clickable picture slideshowJquery 响应式可点击图片幻灯片
【发布时间】：2013-10-17 00:26:27
【问题描述】：

我是 JS 的新手，学习它对我来说是一种负担。我正在努力使用媒体查询构建一个响应式网站。我想要一个可点击的幻灯片，当您点击三个缩略图之一时，它会更改主照片。

我决定让幻灯片保持简单。我有一个主图像和下面三个缩略图的 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>

【问题讨论】：

请在 JSFiddle 中显示，以便更快地发现错误。

标签： javascript jquery responsive-design slideshow

【解决方案1】：

给你：http://jsfiddle.net/JQ7Rk/

问题是 .addClass 不断将类添加到您的 div，而不是替换它们。一旦添加了所有三个类， .addClass 就停止添加它们（因为它们已经打开了！）。因此，让它成为最后一个是永久的！

编辑：哦，我差点忘了。我没有你的照片，所以我把它们换成了可爱的猫。

我决定在 vanilla 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";
    });
  });

【讨论】：

非常感谢！这正是我想要的