<html>

<head>
    <title>دکتر کد - مرجع آموزش هایی به سبک متفاوت</title>
<style>
    .image-box .slider-image img{
        width: 15%;
        height: auto;
        display: inline-block;
        opacity: 0.6;
        z-index: 1;
        margin:3px;
    }
    .image-box .slider-image img:hover{
        opacity: 1;
        z-index: 999;
        cursor: pointer;
    }
    .image-box .slider-image img.active{
        box-sizing: border-box;
        box-shadow:2px 2px 3px #727272;
        opacity: 1;
    }
    .main-image img{
        width: 64%;
        height: auto;
    }
</style>
</head>

<body>

<div class="image-box">
    <div class="main-image">
        <img src="">
    </div>

    <div class="slider-image">
        <div class="image">
            <img src="http://dr-code.ir/uploads/images/201803261522047284jquery-learingn.png" alt="">
            <img src="http://dr-code.ir/uploads/images/201804011522573982html.png" alt="">
            <img src="http://dr-code.ir/uploads/images/201804051522913964css.png" alt="">
            <img src="http://dr-code.ir/uploads/images/201804141523691611javacript.png" alt="">
        </div>
    </div>
</div>

<script type="text/javascript" src="http://dr-code.ir/front/js/jquery-3.2.1.min.js"></script>
<script>
    $(document).ready(function(){
        $('.main-image img').first().attr('src', $('.image img').attr('src'));
        $('.image img').first().addClass('active');
        $('.image img').on('click', function(){
            $('.image img').removeClass('active')
            $(this).addClass('active')
            var src = $(this).attr('src')
            $('.main-image img').attr('src', src)
        })
    })
</script>

</body>

</html>
دکتر کد - مرجع آموزش هایی به سبک متفاوت