단비의 코딩 공부 blog

[javascript]해당 슬롯 롤링 및 새로고침 후 백그라운드 색상 랜덤 본문

javascript&jquery

[javascript]해당 슬롯 롤링 및 새로고침 후 백그라운드 색상 랜덤

황굽달 2023. 6. 27. 16:44

1. html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>300x250_T&I_3_N_yonhap_rolling</title>
</head>
<body>
    <div class="box_wrap">
        <section class="box-type">
            <div class="title-con01">
                <strong class="title-type01 bold"><span class="tit">댓글 많은 뉴스</span></strong>
            </div>
            <div class="list-type118">
                <ol class="list02" id="rollingList">
                    <li class="rolling active">
                        <div class="item-box">
                            <a href="$$_ClickUrl_$$_1" target="_blank" class="img img-cover imgLiquid_bgSize imgLiquid_ready">
                                <div class="cont">
                                    <div class="img-con">
										<img src="$$_ImgUrl_$$_1">
                                    </div>
                                    <div class="news-con">
										<div class="tit-wrap">
											<strong class="tit-news"> $$_Title_$$_1</strong>
										</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                    <li class="rolling">
                        <div class="item-box">
                            <a href="$$_ClickUrl_$$_2" target="_blank" class="img img-cover imgLiquid_bgSize imgLiquid_ready">
                                <div class="cont">
                                    <div class="img-con">
                                        <img src="$$_ImgUrl_$$_2">
                                    </div>
                                    <div class="news-con">
										<div class="tit-wrap">
											<strong class="tit-news">$$_Title_$$_2</strong>
										</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                    <li class="rolling">
                        <div class="item-box">
                            <a href="$$_ClickUrl_$$_3" target="_blank" class="img img-cover imgLiquid_bgSize imgLiquid_ready">
                                <div class="cont">
                                    <div class="img-con">
                                        <img src="$$_ImgUrl_$$_3">
                                    </div>
                                    <div class="news-con">
										<div class="tit-wrap">
											<strong class="tit-news"> $$_Title_$$_3</strong>
										</div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </li>
                </ol>
            </div>
        </section>
    </div>
</body>
</html>

2.CSS

<style>
    body{margin: 0; padding:0}
    a{color: #000; text-decoration: none; cursor: pointer;}
    .title-con01{display: block; box-sizing: border-box; padding: 5px 5px 7px;}
    .tit{font-size:20px;line-height:26px; font-weight:bold; letter-spacing: -1px;}
    .box_wrap {display: block; box-sizing: border-box; width: 300px; height:250px; padding: 0px; border: 1px solid #ddd;}
    .box-type {width: 100%; height: 100%;}
    /* 
    * list-type118 - BEST 5 오래 머문 뉴스
    * .list01 : 메인
    * .list02 : 서브,본문
    * .item-box01 : 강조 */ 
    .list-type118{width: 100%; height: 100%; overflow:hidden;}
    .list-type118>[class*='list']{position:relative;font-size:0;}
    .list-type118 .list>li{min-height:80px;}
    .list-type118 [class*='item-box']{background-color:#fff;}
    .list-type118 [class*='item-box']>[class*='-con']{display:inline-block;position:relative;box-sizing:border-box;vertical-align:top;}
    .list-type118 .img .img-con {width:50%; height:60px; position: relative; overflow: hidden;}
    .list-type118 .img .img-con img {position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%); max-width: 100%; height: auto;}
    .list-type118 .news-con{width:100%;}
    .list-type118 .tit-wrap{display:table-cell;height:52px;vertical-align:middle;}

    .list-type118 .tit-news{overflow:hidden;max-height:48px;font-size:16px;font-weight:400;line-height:24px;vertical-align:middle;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word;}

    /* hover */
    .list-type118 a:hover .tit-news{text-underline-position:under;text-decoration-thickness:1px;text-decoration-line:underline;text-decoration-color:currentColor;}
    /* .item-box01 : 강조 */
    .active .item-box{background-color:#102039;}
    .active .item-box .tit-news{color:#fff; font-size: 20px;}
    .active .item-box:hover{background-color:#3061ff;}
    .active .item-box:hover .tit-news{text-decoration:none;}
    .active .item-box .tit-news{font-weight:600;}
    .list-type118>.list02 .active [class*='item-box']{padding:5px;}

    /* .list02 : 서브,본문 */
    .list02{padding:0;}
    .list-type118>.list02 .img-con+.news-con{width:100%;margin-left:10px;}
    .cont{display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: space-between;}
    .item-box {box-sizing: border-box;padding:5px;}

</style>

3. JS

<script>
   document.addEventListener("DOMContentLoaded", function () {
        const listItems = document.querySelectorAll('#rollingList li');
        let currentIndex = 0;

        function rollClasses() {
            listItems.forEach(item => item.classList.remove('active'));
            listItems[currentIndex].classList.add('active');
            currentIndex = (currentIndex + 1) % listItems.length;
        }

        setInterval(rollClasses, 1000);
    });

    const colors = ['#dcd508', '#102039', 'green', '#d46901']; // 변경할 색상 목록
    let currentIndex = 0;
    let randomColor = '';

    function rollClasses() {
        const listItems = document.querySelectorAll('#rollingList li');
        listItems.forEach(item => {
            item.classList.remove('active');
            item.querySelector('.item-box').style.backgroundColor = ''; // 배경색 초기화
        });

        if (randomColor === '') {
            randomColor = colors[Math.floor(Math.random() * colors.length)]; // 새로운 랜덤한 색상 선택
        }

        listItems[currentIndex].querySelector('.item-box').style.backgroundColor = randomColor; // 배경색 변경
        listItems[currentIndex].classList.add('active');
        currentIndex = (currentIndex + 1) % listItems.length;
    }

    document.addEventListener("DOMContentLoaded", function () {
        rollClasses(); // 초기 실행시 한 번 호출하여 랜덤한 배경색 설정

        setInterval(rollClasses, 1000);
    });
</script>
저작자표시

'javascript&jquery' 카테고리의 다른 글

[javascript] react 들어가기 전! javascript 복습 (실전1)  (1) 2023.11.21
[javascript]새로고침 후 랜덤으로 슬랏에 백그라운드 컬러 이동  (0) 2023.06.28
[Vanilla JS]study 27일차 - 함수  (0) 2023.05.12
[Vanilla JS]study 26일차 - 네이버 회원가입창 제작  (0) 2023.05.08
[Vanilla JS]study 25일차 - 정규표현식  (0) 2023.05.03
'javascript&jquery' Related Articles more