본문 바로가기
dev/jQuery

div 자동 fade 기능 구현.

by Kelvin™ 2011. 10. 11.
개인적으로 만들어 두었던 부분을 다시 jquery 로 재도전..

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script language="javascript">
    $(document).ready(function() {
      objRun = setInterval("automoveleft()", 4000);
    });

    function automoveleft() {

      if (document.getElementById("maxcnt").value == document.getElementById("nowcnt").value) { document.getElementById("setcnt").value = "1";} else { document.getElementById("setcnt").value = parseInt(document.getElementById("nowcnt").value) + 1; }

      divmoving();
    }

    function moveleft() {

      if (document.getElementById("maxcnt").value == document.getElementById("nowcnt").value) { document.getElementById("setcnt").value = "1"; } else { document.getElementById("setcnt").value = parseInt(document.getElementById("nowcnt").value) + 1; }

      divmoving();

      clearInterval(objRun);
    }

    function moveright() {

      if (document.getElementById("setcnt").value == "1") { document.getElementById("setcnt").value = document.getElementById("maxcnt").value; } else { document.getElementById("setcnt").value = parseInt(document.getElementById("nowcnt").value) - 1; }

      divmoving();

      clearInterval(objRun);
    }

    function divmoving() {
      for(i=1;i<=document.getElementById("maxcnt").value;i++) {
        if (i != document.getElementById("nowcnt").value) { document.getElementById("div0"+i).style.display = "none"; }
      }

      $("#div0"+document.getElementById("nowcnt").value).hide("fade", {}, 200);
      $("#div0"+document.getElementById("setcnt").value).show("fade", {}, 200);
      document.getElementById("nowcnt").value = document.getElementById("setcnt").value;
    }

  </script>
</head>
<body style="font-size:62.5%;">

  <!-- 메인 영역 시작-->
  <div id="rollingdiv" name="rollingdiv" style="position:relative;width:899px;height:340px;">
    <div name="div01" id="div01" style="display:block;position:absolute;top:10px;margin: 0px; width: 800px; height: 300px;border: 1px solid black;font-size:30px;text-align:center;">1</div>
    <div name="div02" id="div02" style="display:none;position:absolute;top:10px;margin: 0px; width: 800px; height: 300px;border: 1px solid black;font-size:30px;text-align:center;">2</div>
    <div name="div03" id="div03" style="display:none;position:absolute;top:10px;margin: 0px; width: 800px; height: 300px;border: 1px solid black;font-size:30px;text-align:center;">3</div>
    <div name="div04" id="div04" style="display:none;position:absolute;top:10px;margin: 0px; width: 800px; height: 300px;border: 1px solid black;font-size:30px;text-align:center;">4</div>
    <div name="div05" id="div05" style="display:none;position:absolute;top:10px;margin: 0px; width: 800px; height: 300px;border: 1px solid black;font-size:30px;text-align:center;">5</div>
    <div name="div06" id="div06" style="display:none;position:absolute;top:10px;margin: 0px; width: 800px; height: 300px;border: 1px solid black;font-size:30px;text-align:center;">6</div>
  </div>
  <!-- 메인 영역 종료-->

  <!-- 롤링시 필요한 값 정의 부분 - 실 서비스시엔 type 을 모두 hidden 으로 변경-->
  <input type="text" name="maxcnt" id="maxcnt" value="6"> <!-- 레이어 갯수 최대값 -->
  <input type="text" name="nowcnt" id="nowcnt" value="1"> <!-- 현재 레이어 번호 : 기본 값 1 -->
  <input type="text" name="setcnt" id="setcnt" value="0"> <!-- 변경할 레이어 번호 -->
  <!-- 롤링시 필요한 값 정의 부분 -->

  <!-- 테스트용 이동 버튼 -->
  <div id="testarea" style="display:block;">
    <input type="button" name="swap" id="swap" value="왼쪽으로" onclick="moveleft();">
    <input type="button" name="swap" id="swap" value="오른쪽으로" onclick="moveright();">
  </div>
  <!-- 테스트용 이동 버튼 -->

</body>
</html>

해당 소스 html 화일 :

autodiv.html

저작자표시 비영리 동일조건

티스토리툴바