jQuery响应式可点击图片幻灯片

Question

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

我决定保持幻灯片的简单。 我有一个div，下面有一个主图像和三个缩略图。 当我单击缩略图时，我希望mainPhoto div类更改为具有不同background-image的其他类。 我使用jquery .on("click", function和.addClass来更改单击缩略图之一时的div类。之所以这样做是因为我要使用媒体查询。如果屏幕较小或较大，我正在调用的div类将具有不同的背景图像以适应更大或更小的窗口，但我尚未添加@media代码，但是最终，根据特定的屏幕尺寸，每个类的背景图像将有所不同。

现在，我只想保持简单并创建首先运行的脚本。 我的问题是，当我单击缩略图时，它只能工作一次，并且只能按顺序工作，这意味着如果我在thumbnailThree之前单击thumbnailThree ，则无法单击其他thumbnailTwo 。 我希望能够根据需要单击全部三个货币时间。 也许有一种更简单的方法可以做到这一点，但是我是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>

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

jQuery响应式可点击图片幻灯片

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-10-17 20:51:21

jQuery响应式可点击图片幻灯片

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-10-17 20:51:21

解决方案1
0 已采纳 2013-10-17 20:51:21