Notice
Recent Posts
Recent Comments
Tags more
«   2026/01   »
일 월 화 수 목 금 토
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 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

[Javascript] 간단한 배너 슬라이드 소스 예제1 본문

javascript

[Javascript] 간단한 배너 슬라이드 소스 예제1

웹개발자 워니 2025. 7. 24. 16:16

 

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>배너 슬라이드 예제</title>
  
    <style>
    .slider200 {
      width: 420px;
      margin: 0 auto;
      position: relative;
    }
    .slider200 img {
      width: 100%;
      height: auto;
      border-radius: 10px;
    }
    .caption200 {
      margin-top: 10px;
      font-size: 20px;
      font-weight: bold;
    }
    .nav-btn200 {
      position: absolute;
      top: 40%;
      transform: translateY(-50%);
      background-color: rgba(0,0,0,0.5);
      color: white;
      border: none;
      font-size: 18px;
      padding: 10px;
      cursor: pointer;
    }
    .prev200 {
      left: 0;
    }
    .next200 {
      right: 0;
    }
    </style>
 
 </head>
 <body>
  
 
 
<div style="float:right;width:490px;height:380px;margin-top:30px;">
<center>
  <h2>대리점 안내</h2>
  <div class="slider200" style="margin-top:10px;">
    <button class="nav-btn200 prev200" onclick="prevSlide200()">&lt;</button>
    <img id="dealerImage" src="" alt="대리점 사진" style="cursor:pointer;" onclick="goToDealerUrl()">
    <button class="nav-btn200 next200" onclick="nextSlide200()">&gt;</button>
    <div class="caption200" id="dealerName">대리점명</div>
  </div>
</center>
</div>  
  
  
  <script>
    const dealers = [
      { name: '서울 은평구 대리점 (aaaa)', image: '/imgs/agent1.jpg', url: 'https://blog.naver.com' },
      { name: '대전 서구 대리점 (bbbb)', image: '/imgs/agent2.jpg', url: 'http://blog.naver.com' },
      { name: '대구 달서구 대리점 (cccc)', image: '/imgs/agent3.jpg', url: 'http://blog.naver.com' },
      { name: '경기 용인 대리점 (dddd)', image: '/imgs/agent4.jpg', url: 'https://www.daum.net' },
      { name: '서울 강서구 대리점 (eeee)', image: '/imgs/agent5.jpg', url: '' },
      { name: '인천 부평구 대리점 (ffff)', image: '/imgs/agent6.jpg', url: 'http://www.naver.com' },      
    ];
 
    let current = 0;
 
    function showSlide200(index) {
      const dealer = dealers[index];
      document.getElementById('dealerImage').src = dealer.image;
      document.getElementById('dealerName').textContent = dealer.name;
    }
 
    function nextSlide200() {
      current = (current + 1) % dealers.length;
      showSlide200(current);
    }
 
    function prevSlide200() {
      current = (current - 1 + dealers.length) % dealers.length;
      showSlide200(current);
    }
    
    function goToDealerUrl() {
      const url = dealers[current].url;
      if (url) {
        window.open(url, '_blank'); // 새 창에서 열기
      } else {
        alert("대리점 URL이 등록되어 있지 않습니다.");
      }
    }    
    
 
    setInterval(nextSlide200, 3000); 
 
    window.onload = () => {
      showSlide200(current);
    };
  </script>  
  
 </body>
</html>
 
 cs

 

 

 

'javascript' 카테고리의 다른 글

[Javascript] 모던 자바스크립트 튜토리얼 - 완전판 - 강추  (2) 2025.08.07
[Javascript] 데이터 통신을 위한 Fetch 함수와 Axios 라이브러리  (2) 2025.08.06
[Javascript] 일반함수의 this 와 화살표함수의 this 비교  (0) 2025.03.29
[Javascript] Cross Domain 형태로 정보 교환하기 - CORS 문제 해결하기  (2) 2025.03.04
[Javascript] 핸드폰번호 입력시 하이픈(-) 자동 입력하기  (0) 2025.02.17
'javascript' Related Articles more
Comments