Javascript Jquery响应式可点击图片幻灯片_Javascript_Jquery_Responsive Design_Slideshow

Javascript Jquery响应式可点击图片幻灯片

javascript jquery responsive-design

Javascript Jquery响应式可点击图片幻灯片,javascript,jquery,responsive-design,slideshow,Javascript,Jquery,Responsive Design,Slideshow,我是JS的新手，学习JS对我来说是件难事。我正在努力建立一个响应网站使用媒体查询。我想要一个可点击的幻灯片，当你点击三个缩略图中的一个时，可以改变主照片我决定保持幻灯片的简单。我有一个div，里面有一个主图像和三个缩略图。单击缩略图时，我希望mainPhotodiv类更改为具有不同背景图像的不同类。我正在使用jquery.on（“单击”，函数和.addClass可在单击其中一个缩略图时更改div类。我这样做是因为我将使用媒体查询。如果屏幕更小或更大，我调用的div类将具有不同的背景图像，以适应

我是JS的新手，学习JS对我来说是件难事。我正在努力建立一个响应网站使用媒体查询。我想要一个可点击的幻灯片，当你点击三个缩略图中的一个时，可以改变主照片

我决定保持幻灯片的简单。我有一个div，里面有一个主图像和三个缩略图。单击缩略图时，我希望

mainPhoto

div类更改为具有不同

背景图像的不同类。我正在使用jquery.on（“单击”，
函数和.addClass
可在单击其中一个缩略图时更改div类。我这样做是因为我将使用媒体查询。如果屏幕更小或更大，我调用的div类将具有不同的背景图像，以适应更大或更小的窗口。我没有添加@media
co但最终，我会根据特定的屏幕大小，为每个班级制作不同的背景图片
现在我只想保持它的简单性，并创建一个首先起作用的脚本。我的问题是，当我单击缩略图时，它只起作用一次，并且只按顺序起作用。这意味着如果我在thumbnailTwo
之前单击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>


身体{
保证金：0；
填充：10px；
字体大小：16px；
颜色：#000000；
背景色：#fff；
}
h1{
字号：1.5em；
}
.包裹{
位置：相对位置；
保证金：0自动；
填充：0；
宽度：800px；
}
#mainDiv{
浮动：左；
宽度：800px；
背景色：#888；
}
.主要照片{
浮动：左；
宽度：800px；
高度：600px；
背景图片：url（图片/主要照片）；
背景重复：无重复；
}
主照片二{
背景图片：url（图片/mainPhotoTwo）；
}
.main-photo3{
背景图片：url（图片/mainPhotoThree）；
}
#第二分区{
浮动：左；
宽度：780px；
保证金：0；
填充：10px；
字体大小：.9em；
颜色：#fff；
背景色：#333；
}
#拇指{
浮动：左；
宽度：250px；
高度：250px；
保证金：10px 0px 0px 0px；
填充：0；
背景图片：url（图片/拇指）；
背景重复：无重复；
}
#拇指2{
浮动：左；
宽度：250px；
高度：250px；
保证金：10px 0px 0px 10px；
填充：0；
背景图片：url（图片/拇指两个）；
背景重复：无重复；
}
#拇指三{
浮动：左；
宽度：250px；
高度：250px；
保证金：10px 0px 0px 10px；
填充：0；
背景图片：url（图片/拇指三个）；
背景重复：无重复；
}
克利尔迪夫先生{
明确：两者皆有；
线高：1px；
}
标题测试
一段文字
$（文档）.ready（函数（）{
$（'#thumbOne'）。在（“单击”，函数（）上）{
$（'div.mainPhoto'）.addClass（'mainPhoto'）；
});
});
$（文档）.ready（函数（）{
$（'#thumbtoo'）。在（“单击”，函数（）上）{
$（'div.mainPhoto'）.addClass（'mainPhotoTwo'）；
});
});
$（文档）.ready（函数（）{
$（'#thumbtree'）。在（“单击”，函数（）上）{
$（'div.mainPhoto'）.addClass（'mainPhotoThree'）；
});
});
给你：
问题是。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";
    });
  });

请在JSFiddle中显示它，以便更快地捕获错误。非常感谢！这正是我想要的