Javascript/jQuery：クリックに基づいて画像をスライド

Question

私は3つの画像を持っています。クリックに基づいて画像をスライドしたいと思います。 画像は電話機のdivの左側にスライドする必要があります。

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

.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%; 
 
}

<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>

すべてのヘルプは素晴らしいことです。

ありがとうございます。

Answer 1

これは、開始に役立ちます。いくつかのCSSトランジションを追加しました。あなたは既に（Javascriptを/ jQueryのワイズ）試してみました何

$(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>