페이지 이동없이 이미지만 변경 하는 방법좀 알려주세요 미치겠습니다!


지금 현재 ppt파일을 db로부터 받아와서 슬라이드 한장당 이미지 파일 하나로 저장한다음 하나씩 부르려하는데요

다음 버튼을 누르면 페이지도 이동하고 사진도안바뀌고 그럽니다....

구글링하면서 찾아본거 붙이고 해봤는데 안되서 헤매고있어요ㅠㅜㅠㅜ

이미지 파일은 resources폴더 안에 slide폴더 안에 있는거 가져옵니다.

파일명이 slide-1, slide-2, slide-3 이런식으로 있습니다.

아래는 코드입니다.

<html>
<head>
<%
    int i = 1;
%>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
    $(document).ready(function() {
        $("pre").click(function() {
            <%i -= 1;%>
            $("#image").attr("src","resources/slide/slide-<%=i%>.JPG");
        });
    });


------------------------------------------------------------------------------------------------------------------------------------------------------

    <!-- ppt 띄우기 -->
    <DIV
        style="position: relative; top: 500px; left: 100px; width: 200; height: 200; background: white">

        <iframe width="520" height="415" id="image" name="NeBoard"
            src="resources/slide/slide-<%=i%>.JPG"  scrolling="No" onLoad="ResizeFrame('NeBoard');"></iframe>

        <FORM>
            <%
                if (i == 1) {
            %>
            <BUTTON id="pre" value='이전' target="img" disabled="disabled">
                <img src="resources/img/pre.PNG" width="40" height="40">
            </BUTTON>
            <%
                } else {
            %>
            <BUTTON id="pre" value='이전' target="img">
                <img src="resources/img/pre.PNG" width="40" height="40">
            </BUTTON>
            <%
                }
            %>
            <BUTTON id="next" value='다음' target="img">
                <img src="resources/img/next.PNG" width="40" height="40">
            </BUTTON>
        </FORM>
    </DIV>
    <!-- ppt 띄우기 -->



</body>
</html>
  • 2016년 05월 12일에 작성됨

조회수 365


1 답변


https://codepen.io/zuraizm/pen/vGDHl 코드를 참고해 보세요.

  • 2016년 05월 12일에 작성됨
    루비와 파이썬을 좋아합니다. 새로운 언어를 배우는것도 좋아해요. 모바일 게임도 조금 만들어 봤습니다.

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close