[jQuery] 쇼핑몰 상품박스 예제

jQuery 2018. 2. 13. 10:43




■ 쇼핑몰 상품박스 예제




예제소스 :  merchandise.zip



# 소스코드

 merchandise.php

<html>
<title>:: 상품박스 ::</title>
<head>
<style type="text/css">

.represent {

border:1px solid #FF0000;

width:460px;

overflow:auto;

}


ul {
    list-style:outside none none;
    margin:0;
    padding:0;
}

li {
    margin:0 0 0 0;
    padding:0 0 0 0;
    border:0;
    float:left;
    width:20%;
}

img {
    width:100%;
}
</style>
</head>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
function changeRepresentImage(num) {
    var link = jQuery(".imgServe").eq(num).attr("src");
    jQuery("#imgRepresent").attr("src", link);
}
</script>
<body>
    <div class="represent">
        <img id="imgRepresent" src="./image/Box_01.png" style="width:460px;height:460px;"/>
        <ul>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('0');">
                    <img class="imgServe" src="./image/Box_01.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('1');">
                    <img class="imgServe" src="./image/Box_02.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('2');">
                    <img class="imgServe" src="./image/Box_03.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('3');">
                    <img class="imgServe" src="./image/Box_04.png"/>
                </a>
            </li>
            <li>
                <a href="javascript:;" onMouseover="changeRepresentImage('4');">
                    <img class="imgServe" src="./image/Box_05.png"/>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>



# 출력결과