본문 바로가기
내마음대로만들어보자/HTML

웹디자인 연습 - 이미지슬라이드

by 소농민! 2022. 3. 14.
728x90

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>롯데월드 연습</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="wrap">
        <header id="header" class="clearfix">
            <h1><a href="#"><img src="images/logo.jpeg" alt="롯데월드"></a></h1>
            <nav class="nav">
                <ul class="clearfix">
                    <li><a href="#">즐길거리</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                        </ul>
                    </li>
                    <li><a href="#">요금/우대혜택</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-2</a></li>
                            <li><a href="#">submenu-2</a></li>
                        </ul>
                    </li>
                    <li><a href="#">참여프로그램</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-3</a></li>
                            <li><a href="#">submenu-3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">이용가이드</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-4</a></li>
                            <li><a href="#">submenu-4</a></li>
                            <li><a href="#">submenu-4</a></li>
                            <li><a href="#">submenu-4</a></li>
                        </ul>
                    </li>
                    <li><a href="#">소통서비스</a>
                        <ul class="submenu">
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                            <li><a href="#">submenu-1</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </header>
        <!-- //header -->
        <section id="banner">
            <div class="slideList">
                <div class="slideImg">
                    <h2>이미지1</h2>
                    <img src="images/banner01.jpeg" alt="롯데월드 이미지1">
                </div>
                <div class="slideImg">
                    <h2>이미지2</h2>
                    <img src="images/banner01.jpeg" alt="롯데월드 이미지2">
                </div>
                <div class="slideImg">
                    <h2>이미지3</h2>
                    <img src="images/banner01.jpeg" alt="롯데월드 이미지3">
                </div>
            </div>
        </section>
        <!-- //banner -->
        <section id="content1">
            
        </section>
        <!-- //content1 -->
        <section id="content2">
            
        </section>
        <!-- //content2 -->
        <footer id="footer">
            
        </footer>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="script/jquery.min_1.12.4.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>
/* reset */
*{margin: 0; padding: 0;}
li {list-style: none;}
a {color: #111; text-decoration: none;}
.clearfix::before, .clearfix::after {content: ''; display: block; clear: both;}

/* 레이아웃 */
#wrap {width: 1000px;height: 1000px;margin: 0 auto; background: ;}
#header {}
#banner {}
#content1 {}
#content2 {}
#footer {}

/* header */
#header {height: 100px; background: ;}
#header h1 {float: left;}
#header h1 img {width: 150px;padding-top: 5px;}
#header nav {position: relative;float: right; z-index: 100; margin-top: 30px;}
#header nav ul {}
#header nav ul li {position: relative;float: left;width: 150px;text-align: center;}
#header nav ul li:hover {background: #888;}
#header nav ul li a {font-size: 20px;display: block; padding: 20px 15px;}
#header nav ul li ul.submenu {display: none ; position: absolute; left: 0; top: 60px;}
#header nav ul li ul.submenu li {float: left; width: 100%;}
#header nav ul li ul.submenu li a {font-size: 15px;padding: 10px;}
#header nav ul li ul.submenu li a:hover {background: #888;}

/* banner */
#banner {width: 1000px;height: 378px;overflow: hidden;}
#banner .slideList {position: relative;}
#banner .slideList .slideImg {position: relative;}
#banner .slideList .slideImg h2 {position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%);border-radius: 30px; background: rgba(0,0,0,0.5); padding: 10px 30px; color: #fff;}
#banner .slideList .slideImg img {width: 100%; display: block;}
//메뉴

$(".nav > ul > li").hover(function(){
    $(this).find(".submenu").stop().slideDown();
}, function(){
    $(this).find(".submenu").stop().slideUp();
});

//이미지 슬라이드
var slideCount = $(".slideImg").length;
//console.log(slideCount);
var currentIndex = 0;

setInterval(function(){
    if(currentIndex < slideCount -1){
        currentIndex++
    }else{
        currentIndex = 0;
    }
    var slidePostion = currentIndex * (-378)+"px";
    
    $(".slideList").animate({ top:slidePostion},400);
},3000);
저작자표시

'내마음대로만들어보자 > HTML' 카테고리의 다른 글

웹페이지 만들기 연습 - CookIt  (0) 2022.03.21
웹디자인연습 - 컨텐츠영역(레이어팝업,탭메뉴)  (0) 2022.03.15
웹디자인 연습 - 메뉴 영역  (0) 2022.03.13
웹디자인 연습 예제  (0) 2022.03.09
HTML 이미지슬라이드 유형(좌우)  (0) 2022.03.01

관련글

티스토리툴바