본문 바로가기
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>



# 출력결과





반응형
저작자표시

'jQuery' 카테고리의 다른 글

[jQuery] Datepicker(캘린더) 위치 수정  (0) 2017.03.21
[jQuery] 이미지 슬라이드 만들기  (0) 2016.11.23
[jQuer] 움직이는 애니메이션  (0) 2016.01.03
[jQuery] 이미지 출력 및 숨기기  (0) 2016.01.03
[jQuery] 움직이는 이미지  (0) 2016.01.03

'jQuery' Related Articles

티스토리툴바