Javascript / jQuery：基于点击幻灯片图片

Question

我有3张图片。我想基于点击滑动图像。 图像应该滑动到手机中div的左侧。

＆＃13;

＆＃13;

$( document ).ready(function() {
    $('#image1').click( function (){
      
    });
});

＆＃13;

.phone_contain_div{
  position:relative;
}

.phone_contain_div .image_div{
  position:absolute;
  
    border: thin #000 solid;
    top: 16%;
    bottom: 0;
    left: 12.7%;
    right: 0;
    width: 46%;
    height: 64.4%;
}

.phone_contain_div .image_div img{
  max-width:100%;
  max-height:100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image1"> Image 1</div>
<div id="image2"> Image 2</div>
<div id="image3"> Image 3</div>

<div class="phone_contain_div">
<img src="https://i.imgur.com/pzG9Elb.png">

<div class="image_div">
  <img src="https://i.imgur.com/PtuiQo8.jpg">
  <img src="https://i.imgur.com/fCOoKNU.jpg">
  <img src="https://i.imgur.com/rm3BCnn.jpg">
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

任何帮助都会很棒。

谢谢。

Answer 1

这应该可以帮助您入门。添加了一些css过渡。

$(document).ready(function() {
  $('.image_click .image').click(function() {
    $(this).siblings('.image').removeClass('active');
    $(this).addClass('active');
    $('.image_div').find('img').css('left', '100%');
    $('.image_div').find('img').eq($(this).index()).css('left', '0');

  });
});

.phone_contain_div {
  position: relative;
}

.phone_contain_div .image_div {
  position: absolute;
  border: thin #000 solid;
  top: 16%;
  bottom: 0;
  left: 12.7%;
  right: 0;
  width: 46%;
  height: 64.4%;
  overflow: hidden;
}

.phone_contain_div .image_div img {
  max-width: 100%;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
  transition: all .2s;
}

.image_click>.image.active {
  color: red;
}

.image_div img {
  position: absolute;
  left: 100%;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_click">
  <div class="image"> Image 1</div>
  <div class="image"> Image 2</div>
  <div class="image"> Image 3</div>
</div>
<div class="phone_contain_div">
  <img src="https://i.imgur.com/pzG9Elb.png">

  <div class="image_div">
    <img src="https://i.imgur.com/PtuiQo8.jpg">
    <img src="https://i.imgur.com/fCOoKNU.jpg">
    <img src="https://i.imgur.com/rm3BCnn.jpg">
  </div>
</div>