웹디자인개발기능사

슬라이딩 스크립트등

xemaker 2025. 11. 30. 14:47
// 메뉴

$(".main-menu").mouseover(function(){
    $(".sub-menu").stop().fadeIn();
});
$(".main-menu").mouseout(function(){
    $(".sub-menu").stop().fadeOut();
});


let currentIdx=0;
setInterval(() => {
    let nextIdx=(currentIdx+1)%3;

    $(".slide-wrapper").find(".slide").eq(currentIdx).fadeIn();
    $(".slide-wrapper").find(".slide").eq(nextIdx).fadeOut();

    currentIdx=nextIdx;

}, 1000);



 

E유형

 <section class="slide-wrapper">
                <h2 class="hidden">슬라이드</h2>
                <div class="slide-image">
                    <ul class="container">
                        <li class="slide"><a href=""><img src="images/slide_d_01.jpg" alt="슬라이드1"></a></li>
                        <li class="slide"><a href=""><img src="images/slide_d_02.jpg" alt="슬라이드2"></a></li>
                        <li class="slide"><a href=""><img src="images/slide_d_03.jpg" alt="슬라이드3"></a></li>
                    </ul>
                </div>
            </section>
@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: "맑은 고딕";
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
}

a{
    color: inherit;
}
.hidden{
    display: none;
}

/* Layout */
body{
    height: 100vh;
}
main {
    display: flex;
    height:calc(100% - 120px);
}

aside{
    width: 200px;
}
main .center{
    width: 400px;
}
main .slide-wrapper {
  flex: 1;
}


/* ASIDE */
aside header{
    height: 100px;    
}
aside nav{
    background: #fff;    
    margin:20px 10px 20px;
    border:1px solid #ccc;
}
.sub-menu {
    background: #ccc;
    display: none;
}
aside nav li{
    line-height: 40px;
}
aside nav > ul > li + li{
    border-top:1px solid #ccc;
}
aside nav a{
    display: block;
    padding: 0 5px;
    color: #333;
    transition:0.3s;
}
aside nav li:hover > a{
    background: #666;
    color: #fff;
}

aside .spot-menu{
    display: flex;
    justify-content: center;  
}
aside .spot-menu li{
    padding: 0 10px;
}
aside .spot-menu li:first-child{
    border-right:1px solid #ccc;
}
aside .spot-menu li a:hover{
    text-decoration: underline;
}

/* SLIDES */
.slide-wrapper {
    flex: 1;
  }
 
  .slide-wrapper>* {
    height: 400px;
  }
 
  .slide-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
 
  .slide-image .container {
    height: 300%;
    width: 100%;
    position: relative;
  }
 
  .slide-image .container .slide {
    height: calc(100%/3);
    width: 100%;
  }
 
  .slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* Center */
.center{
    padding: 10px;
}
.center > * {
    margin:20px 0;
}

/* News Gallery */
.news-gallery h2{  
    border-radius:5px 5px 0 0;
    display: inline-block;
    padding: 5px 10px;
    background: #666;
    color: #fff;
    margin-bottom:-1px;
}
.news-gallery ul{
    border:1px solid #666;    
}
#notice {
    margin-bottom: 20px;
}
#notice ul li{
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    transition: 0.3s;
    border-bottom: 1px dashed #ebebeb;
    padding: 0 5px;
}
#notice ul li:last-child{
    border-bottom:none;
}
#notice ul li:hover{
    background: #ebebeb;
}

#notice ul li a:hover {
    font-weight: bold;
}

#gallery ul{
    display: flex;
    justify-content: space-between;
    gap:10px;
    padding: 15px 20px;
}

#gallery ul li{
    transition:0.3s;
    text-align: center;
}
#gallery ul li img {
    width: 100%;
}

#gallery ul li:hover {
    opacity: 0.5;
}
.banner ul{
    display: flex;
    justify-content: space-between;
}
.banner ul li{
    text-align: center;
}
.banner ul img{
    height: 50px;
}
/* Footer */
footer {
    display: flex;
  }
 
  footer>* {
    display: flex;
    height: 100px;
    align-items: center;
    justify-content: center;
  }
 
  .footer-logo {
    width: 200px;
  }
 
  .copyright {
    flex: 1;
  }
 
  .family-site {
    width: 230px;
  }
 
  .family-site select {
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 3px;
  }
/* popup */
#popup {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    z-index:10;
    background: rgba(0, 0, 0, .5);
}

#popup .popup_content {
    width: 400px;
    padding: 20px 20px 100px;
    background: #fff;
    border-radius: 5px;
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    box-shadow: 0 0 3px rgba(0, 0, 0, .5);    
}

#popup .popup_content .close {
    position: absolute;
    right: 10px;
    bottom: 10px;
    background: #333;
    color: #fff;
    cursor: pointer;
    padding: 5px 8px;
}

#popup.active {
    display: block;
}
let mainMenu = $('.main-menu>li');
mainMenu.mouseover(function () {
    $(this).find('ul').stop().slideDown();
}).mouseout(function () {
    $(this).find('ul').stop().slideUp();
});

//슬라이드
let slideContainer = $('.slide-wrapper .container');
let slide = slideContainer.find('.slide');
let slideCount = slide.length;
let currentIdx = 0;

function autoSlide() {
    setInterval(function () {
        //3초마다 반복수행 할 구문 시작  
        let nextIdx = (currentIdx + 1) % slideCount;
        slideContainer.animate({
            top: -100 * nextIdx + '%'
        });
        currentIdx = nextIdx;
    }, 3000)
}
autoSlide();

//탭
let tabMenu = $('.tabmenu li');
let tabContent = $('.tabcontent > div');

tabMenu.click(function (e) {
    e.preventDefault();
    tabMenu.removeClass('active');
    $(this).addClass('active');
    let target = $(this).find('a').attr('href');
    tabContent.removeClass('active');
    $(target).addClass('active');
});
//팝업
let popupLink = $('#notice li:first');
let popup = $('#popup');
let popupCloseBtn = popup.find('.close');

popupLink.click(function (e) {
    e.preventDefault();
    popup.addClass('active');
});

popupCloseBtn.click(function () {
    popup.removeClass('active');
});
저작자표시 (새창열림)