<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<header>
<div id="logo"><img src="img/img_logo_scroll.jpg" alt="#" /></div>
<ul class="nav">
<li class="bn">
상위메뉴1
<ul class="sn">
<li>하위메뉴1</li>
<li>하위메뉴2</li>
<li>하위메뉴3</li>
<li>하위메뉴4</li>
<li>하위메뉴5</li>
</ul>
</li>
<li class="bn">
상위메뉴2
<ul class="sn">
<li>하위메뉴1</li>
<li>하위메뉴2</li>
<li>하위메뉴3</li>
<li>하위메뉴4</li>
<li>하위메뉴5</li>
</ul>
</li>
<li class="bn">
상위메뉴3
<ul class="sn">
<li>하위메뉴1</li>
<li>하위메뉴2</li>
<li>하위메뉴3</li>
<li>하위메뉴4</li>
<li>하위메뉴5</li>
</ul>
</li>
<li class="bn">
상위메뉴4
<ul class="sn">
<li>하위메뉴1</li>
<li>하위메뉴2</li>
<li>하위메뉴3</li>
<li>하위메뉴4</li>
<li>하위메뉴5</li>
</ul>
</li>
<li class="bn">
상위메뉴5
<ul class="sn">
<li>하위메뉴1</li>
<li>하위메뉴2</li>
<li>하위메뉴3</li>
<li>하위메뉴4</li>
<li>하위메뉴5</li>
</ul>
</li>
</ul>
</header>
<section class="fade">
<div class="fadeWrap">
<div class="fadeslide on"><img src="img/page1_visual1.jpg" alt=""></div>
<div class="fadeslide"><img src="img/page1_visual2.jpg" alt=""></div>
<div class="fadeslide"><img src="img/page1_visual3.jpg" alt=""></div>
</div>
<ul class="pointer">
<li class="on"></li>
<li></li>
<li></li>
</ul>
<a href="#" class="prev"><img src="img/btn_slide_prev.png" alt=""></a>
<a href="#" class="next"><img src="img/btn_slide_next.png" alt=""></a>
</section>
<div class="tabWrap">
<div class="tab1">
<ul class="tabNav">
<li><a href="#tab1-1" class="on">tab1-1</a></li>
<li><a href="#tab1-2">tab1-2</a></li>
<li><a href="#tab1-3">tab1-3</a></li>
<li><a href="#tab1-4">tab1-4</a></li>
</ul>
<div class="content">
<div id="tab1-1" class="tab on"><img src="img/tab1-1.png" alt="#" /></div>
<div id="tab1-2" class="tab"><img src="img/tab1-2.png" alt="#" /></div>
<div id="tab1-3" class="tab"><img src="img/tab1-3.jpg" alt="#" /></div>
<div id="tab1-4" class="tab"><img src="img/tab1-4.jpg" alt="#" /></div>
</div>
</div>
<div class="tab2">
<ul class="tabNav">
<li><a href="#tab2-1" class="on">tab2-1</a></li>
<li><a href="#tab2-2">tab2-2</a></li>
<li><a href="#tab2-3">tab2-3</a></li>
<li><a href="#tab2-4">tab1-4</a></li>
</ul>
<div class="content">
<div id="tab2-1" class="tab on"><img src="img/tab2-1.jpg" alt="#" /></div>
<div id="tab2-2" class="tab"><img src="img/tab2-2.jpg" alt="#" /></div>
<div id="tab2-3" class="tab"><img src="img/tab2-3.jpg" alt="#" /></div>
<div id="tab2-4" class="tab"><img src="img/tab2-4.jpg" alt="#" /></div>
</div>
</div>
</div>
<div class="banner">
<ul>
<li><img src="img/1 (1).jpg" alt="#" /></li>
<li><img src="img/1 (2).jpg" alt="#" /></li>
<li><img src="img/1 (3).jpg" alt="#" /></li>
<li><img src="img/1 (4).jpg" alt="#" /></li>
</ul>
</div>
<div class="ft_banner">
<ul>
<li><img src="img/banner_01.jpg" alt="#" /></li>
<li><img src="img/banner_02.png" alt="#" /></li>
<li><img src="img/banner_03.jpg" alt="#" /></li>
<li><img src="img/banner_04.png" alt="#" /></li>
<li><img src="img/banner_05.jpg" alt="#" /></li>
<li><img src="img/banner_06.png" alt="#" /></li>
<li><img src="img/banner_07.jpg" alt="#" /></li>
</ul>
</div>
</body>
</html>
header {padding: 20px 0; position: sticky; top:0; z-index: 999; background:#fff;}
header:after{content:""; clear: both; display: block;}
#logo{width: 20%; float: left; text-align: center;}
header ul{width: 80%; float: right; text-align: center;}
.bn{width: 15%; display: inline-block;}
.bn .sn{width: 100%; display: none;}
.bn .sn li{display: flex;}
section.fade { width: 100%; margin: 0 auto; position: relative; height: 1000px;}
.fadeslide {position: absolute; display: none;}
.fadeslide.on {display: block;}
section.slide {width: 100%; margin: 0 auto;}
.pointer {position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex;}
.pointer li {width: 15px; height: 15px; background: #ccc; margin: 10px; border-radius: 50%;}
.pointer li.on {background: orange; }
a.prev,a.next {position: absolute; transform: translateY(-50%); top: 50%; }
a.prev {left: 50px;}
a.next {right: 50px;}
.tabWrap{display: flex; justify-content: center;}
.tabWrap:after{content:""; clear: both; display: block;}
.tab1{ display: flex; height:305px; float: left; border: 1px solid purple;}
.tabNav li a{width:220px; font-size:30px; display: block;}
.tabNav li a.on{background:#000; color:#fff;}
.tab2{height: 305px; float: left; border: 1px solid green;}
.tab2 .tabNav li{display: inline-block;}
.tab1 .content{width: 460px;}
.tab2 .content{width: 100%;}
.content{ height:100%; position: relative;}
.content div{position: absolute; display: none;}
.content div.on{display: block;}
.content div img{width: 100%;}
.banner{width: 1200px; margin:50px auto;}
.banner ul li{display:table-cell;}
.banner ul li img{width: 100%;}
.ft_banner{width: 1200px; height:58px; overflow:hidden; margin:auto;}
.ft_banner ul{position: relative;}
.ft_banner li{width:200px; height:58px; float: left; border: 1px solid #eee;}
.ft_banner li img{width: 100%;}
$(function () {
$('.nav .bn').click(function () {
$('.sn').slideToggle('li')
})
var len = $('.fadeslide').length
var i = $('.fadeslide.on').index()
console.log(len, i)
$('.pointer li').click(function () {
i = $(this).index()
showslide(i)
})
$('a.next').click(function (e) {
e.preventDefault();
if (i == len - 1) {
i = 0
} else {
i += 1
}
showslide(i)
})
$('a.prev').click(function (e) {
e.preventDefault();
if (i == 0) {
i = len - 1
} else {
i -= 1
}
showslide(i)
})
function showslide(index) {
$('.pointer li').removeClass('on');
$('.pointer li').eq(index).addClass('on');
$('.fadeslide').fadeOut();
$('.fadeslide').eq(index).fadeIn();
}
tab('.tab1')
tab('.tab2')
function tab(name) {
$(name + ' .tabNav li a').click(function (e) {
e.preventDefault()
var idx = $(this).attr('href')
$(name + ' .tabNav li a').removeClass('on')
$(this).addClass('on')
$(name + ' .tab').stop().fadeOut()
$(idx).stop().fadeIn()
})
}
var len = $('.ft_banner li').length
var wid = parseInt($('.ft_banner li').outerWidth())
var total = len * wid
$('.ft_banner ul').css({
'width': total
})
var mleft = 0
setInterval(move, 20)
function move() {
mleft -= 2
$('.ft_banner ul').css({
'left': mleft
})
if (mleft == -202) {
$('.ft_banner ul li').eq(0).appendTo('.ft_banner ul')
} else if (mleft < -400) {
mleft = -200
}
}
})
