JavaScript

for

for문을 이용하여 배경색상 바꾸기

HTML

<button onclick="colorBg()">color 바꾸기</button>

JavaScript

let color=['yellogreen','pink','teal','skyblue'];
        let i=0;
        function colorBg(){
            if(i>=color.length){i=0}
            const bodyTag=document.getElementsByTagName("body")[0];
            bodyTag.style.backgroundColor=color[i];
            i++
        }

for문을 이용하여 포토 슬라이드 만들기

HTML

<div id="gallery">
        <h1>동해안 갤러리</h1>
        <p id="photo">
            <img src="./images/pic_1.jpg" alt="동해안이미지1">
        </p>
        <div id="photoList">
            <ul id="innerList">
                <li><a href="./images/pic_1.jpg"><img src="./images/pic_t1.jpg" alt="사진1"></a></li>
                <li><a href="./images/pic_2.jpg"><img src="./images/pic_t2.jpg" alt="사진2"></a></li>
                <li><a href="./images/pic_3.jpg"><img src="./images/pic_t3.jpg" alt="사진3"></a></li>
                <li><a href="./images/pic_4.jpg"><img src="./images/pic_t4.jpg" alt="사진4"></a></li>
                <li><a href="./images/pic_5.jpg"><img src="./images/pic_t5.jpg" alt="사진5"></a></li>
                <li><a href="./images/pic_6.jpg"><img src="./images/pic_t6.jpg" alt="사진6"></a></li>
                <li><a href="./images/pic_7.jpg"><img src="./images/pic_t7.jpg" alt="사진7"></a></li>
                <li><a href="./images/pic_8.jpg"><img src="./images/pic_t8.jpg" alt="사진8"></a></li>
            </ul>
        </div>
        <p class="btn-wrap">
            <a href="javascript:void()" id="befroe-btn">&lt</a>
            <a href="javascript:void()" id="next-btn">&gt</a>
        </p>
    </div>

CSS

*{margin: 0; padding: 0;}
        li{list-style: none;}
        #gallery{
            width: 350px;
            margin: 100px auto;
            border: 5px solid rgb(124, 91, 215);
            box-shadow: 5px 5px 10px #ccc;
            text-align: center;
            padding: 20px;
        }
        #gallery h1{margin: 10px 0;}
        #photo img{border: 5px solid rgb(124, 91, 215); width: 100%; box-sizing: border-box;}
        #photoList{
            width: 300px;
            margin: 10px auto;
            overflow: hidden;
        }
        #photoList ul{
            width: 800px;
            margin: 0 auto;
            transition: .5s;
            position: relative;
            left: 0;
        }
        #photoList ul::after{
            content: '';
            display: block;
            clear: both;
        }
        #photoList ul li{
            float: left;
            width: 100px;
            margin: 0 auto;
            text-align: center;
        }
        #photoList ul li a img{
            border: 3px solid rgb(124, 91, 215);
        }
        .btn-wrap a{
            font-weight: bold;
            text-decoration: none;
            color: #000;
        }

JavaScript

window.onload=function(){
            let listZone=document.getElementById('innerList');
            let listA=listZone.getElementsByTagName("a");

            for(let i=0; i<listA.length; i++){
                listA[i].onclick=function(){
                   let ph=document.getElementById('photo').children[0];
                   ph.src=this.href;
                   return false;
                }
            }
            const nextBtn=document.getElementById('next-btn');
            const prevBtn=document.getElementById('befroe-btn');
            let m_num=0;
            nextBtn.onclick=function(){
                if(m_num>=listA.length-3){return false}
                m_num++;
                listZone.style.left=-100*m_num +"px";
            }
            prevBtn.onclick=function(){
                if(m_num<=0){return false}
                m_num--;
                listZone.style.left=-100*m_num +"px";
                
            }
        }

Dom 조작을 할려면 밑에 있어야하고 위에 스크립트를 작성하려면 window.onload=finction(){} 을 쓴다.

return false; 는 하이퍼링크를 새창으로 띄우는걸 방지