Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

4/2 slide javascript 본문

TIS_2016/HTML5_1기

4/2 slide javascript

moozi 2016. 4. 1. 15:45

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>SlideShow</title>

    <!-- vendor prefix free 사용. -webkit- 등을 자동으로 붙여줌 -->

    <script src="js/prefixfree.min.js" type="text/javascript"></script>

    <!-- style sheet 사용 -------------------------------->

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="slideshow-container">

        <div class="mySlides fade">

            <div class="numbertext"> 1/3 </div>

            <img src="img/pic1.jpg" width="100%">

            <div class="text">

                사진1

            </div>            

        </div>


        <div class="mySlides fade">

            <div class="numbertext"> 2/3 </div>

            <img src="img/pic2.jpg">

            <div class="text">

                사진2

            </div>    

        </div>

        <div class="mySlides fade">

            <div class="numbertext"> 3/3 </div>

            <img src="img/pic3.jpg">

            <div class="text">

                사진3

            </div>    

        </div>


        <!-- plusSlides(-1) -> showSides()순으로 실행됨 ----->

        <a href="#" class="prev" onClick="plusSlides(-1)"> &lt; </a>

        <a href="#" class="next" onClick="plusSlides(1)"> &gt; </a>

      

    </div>

    

    <!-- indicator : 현재 위치 표시 ----------------------------->

    <div style="text-align:center">

     <!-- currentSlide(1) -> showSlides(1)순으로 실행됨 ----->

      <span class="dot active" onClick="currentSlide(1)"></span> 

      <span class="dot" onClick="currentSlide(2)"></span> 

      <span class="dot" onClick="currentSlide(3)"></span> 

    </div>

    <script>

    var slideIndex = 1; //배열의 index는 0부터. -1해야 함.

    showSlides(slideIndex); //첫번째 사진이 보이게.


    function plusSlides(n) {

      showSlides(slideIndex += n);

    }


    //slideIndex에 n값을 저장하고, showSlides를 호출

    function currentSlide(n) {

//      slideIndex=n;   

//      showSlides(slideIndex);

        showSlides(slideIndex=n);

    }  

        

    function showSlides(n) {

      var i;

      /* mySlides클래스가 적용된 엘리먼트들을 찾아서 배열로 리턴 

                slides는 배열이 됨.      

      */

      var slides = document.getElementsByClassName("mySlides"); 

        

      /* next버튼을 눌러서 끝까지 가면. 처음부터 다시시작 */  

      if (n > slides.length) {slideIndex = 1}    

      /* prev버튼을 눌러서 처음까지 가면. 끝으로.*/    

      if (n < 1) {slideIndex = slides.length} ;

    

      //사진을 하나씩, 전부 안보이게.     

      for (i = 0; i < slides.length; i++) {

         slides[i].style.display = "none";  

      }

      // 선택한 사진만 보이게.    

      slides[slideIndex-1].style.display = "block";  


      // dot를 찾아서 배열로 리턴.    

      var dots = document.getElementsByClassName("dot");    

      // active설정 모두 없애기

      for (i = 0; i < dots.length; i++) {

         dots[i].classList.remove("active");

      }

      // 선택한 사진(dot)만 active 적용

      dots[slideIndex-1].classList.add("active");  

        

        

    }

    </script>


    

    

    

    

    

</body>

</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

d-day 구하기 javascript  (0) 2016.04.04
부트스트랩에서 navbar 배경색 바꾸기  (0) 2016.04.04
modal video fullscreen  (0) 2016.03.31
3/29 html코드  (0) 2016.03.29
3/29 css코드  (0) 2016.03.29
'TIS_2016/HTML5_1기' Related Articles more
Comments