Jam's story

[JS] < ,> 버튼 과 목차버튼으로 이미지 넘기기 본문

WEB/JavaScript

[JS] < ,> 버튼 과 목차버튼으로 이미지 넘기기

애플쩀 2022. 6. 6. 15:47 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SS16 2022. 6. 3. - 오후 3:44:47</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 4:05 수업 시작 -->
<style>
  *{ box-sizing: border-box;}
  body{
    margin: 0;
    font-family: Verdana, sans-serif;
  }
  .slideshow-container{
     max-width: 1000px;
     position: relative;
     margin: auto;
  }
  
  .text{
    color:#2f2f2f;
    font-size: 15px;
    text-align: center;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width:100%;    
  }
  .numbertext{
    color:#2f2f2f;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top:0;
  }
  /* 
  .mySlides{
      display: none;
  }
   */
  img{
     vertical-align: middle;
  }
</style>
<style>
   .prev, .next{
      position: absolute;
      cursor: pointer;
      top:50%;
      color:white;
      width:auto;
      padding: 16px;
      margin-top: -22px;
      font-weight: bold;
      font-size:18px;
      border-radius: 0 3px 3px  0;
     /*  text-decoration: none; */
     
     transition:0.6s ease;
   }
   .next{
      right:0;
      border-radius: 3px 0 0 3px;
   }
   
   .prev:hover, .next:hover{
     background-color: rgba(0,0,0, 0.8);
   }
</style>
<style>
   .dots{
     position: absolute;
     top:10px;
     width:100%;
     text-align: center;
   }
   
   .dot{
     cursor: pointer;
     height: 15px;
     width: 15px;
     margin:0 2px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
     transition:background-color 0.6s ease;
   }
   
   .active, .dot:hover{
     background-color: #717171;
   }
   
   .fade{
      animation-name:fade;
      animation-duration:1.5s;
      
      -webkit-animation-name:fade;
      -webkit-animation-duration:1.5s;      
   }
</style>
<style>
   /* 애니메이션 효과 */
   @keyframes fade{
     from{ opacity: 0.4 }
     to{ opacity:1}
   }
   @-webkit-keyframes fade{
     from{ opacity: 0.4 }
     to{ opacity:1}
   }
</style>

</head>
<body>

<h3>ex05.html</h3>

<div class="slideshow-container">
	<div class="mySlides fade">
		<div class="numbertext">1 / 3</div>
		<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjAyMDdfMTIy%2FMDAxNjQ0MjE2MzgxMjg2.fxKEUEaHRyRL1ToFHNiQ-gEiteSVf2-Hs7-8lx3eJ-Ag._yu3ukz29vCuwRI3xcEyjUTJR_uVAAf0iILp5hzSlWQg.JPEG.sharp5sleep%2F20220117_175500.jpg&type=a340" style="width:100%" alt="" />
		<div class="text">Caption One</div>
	</div>
	<div class="mySlides fade">
		<div class="numbertext">2 / 3</div>
		<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjAzMjZfMjcz%2FMDAxNjQ4MjUxMjExMzEx.eCqMuZ-krxRI48pjfC7VxHNcEfRdkWnHwrqYUUVYwDUg.c7q7dIUODOn5Z8XJurTxEixcnf3E9ugE5b-b5Lbt6CAg.JPEG.wahyb2%2Foutput_2624104306.jpg&type=a340" style="width:100%" alt="" />
		<div class="text">Caption Two</div>
	</div>
	<div class="mySlides fade">
		<div class="numbertext">3 / 3</div>
		<img src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTEwMjJfMjc1%2FMDAxNjM0ODU4MDU4ODk5.nG0vjJDUPoxqtEpQ_7Ropseq-al5Oahhe7SRKJBgN4Mg.Ik2ar44k3kv1akvGTLcLZFpCx89vEP8wTVh2Nk2an4Ug.JPEG.yujjing2e%2F%25C0%25CC%25B9%25CC%25C1%25F611.jpg&type=a340" style="width:100%" alt="" />
		<div class="text">Caption Three</div>
	</div>
<a  class="prev" onclick="changeSlide(-1)">&#10094;</a>
<a  class="next" onclick="changeSlide(1)">&#10095;</a>

<div class="dots" style="text-align:center;">
<span class="dot" onclick="dotSlide(1)"></span>
<span class="dot" onclick="dotSlide(2)"></span>
<span class="dot" onclick="dotSlide(3)"></span>
</div>
</div>


<script>
  var slideIndex=1;

  function showSlides(n){
      var slides=document.getElementsByClassName("mySlides");
      var dots=document.getElementsByClassName("dot");
      for(var i=0; i<slides.length; i++){
          slides[i].style.display="none";
          dots[i].classList.remove("active");
      }
      //매개변수 인덱스 첫번째를 1로 지정했기 때문에 
      slides[n-1].style.display="block";
      dots[n-1].classList.add("active");
  }
  showSlides(slideIndex);

</script>

<script>
       function changeSlide( value ){
	   slideIndex += value;
	   
	   if( slideIndex  == 0 ) slideIndex = 3;
	   else if( slideIndex == 4 ) slideIndex = 1;
	   
	   showSlides(   slideIndex   );
   }
    
    function dotSlide(n){
        slideIndex=n;
        showSlides(slideIndex);
    }
</script>
</body>
</html>
SS16 2022. 6. 3. - 오후 3:44:47

ex05.html

1 / 3
Caption One
2 / 3
Caption Two
3 / 3
Caption Three
저작자표시 (새창열림)

'WEB > JavaScript' 카테고리의 다른 글

[JS] Boolean  (0) 2022.06.06
[JS] Math  (0) 2022.06.06
[JS] 달력만들기  (0) 2022.06.05
[JS] 배경색변경  (0) 2022.06.05
[JS] 달력만들기  (0) 2022.06.03
'WEB/JavaScript' Related Articles more
Comments