[jQuery] 14.실습:tour2000(움직이는 배너)

in Web on jQuery


실습: tour2000




/*----------- tour2000.css -----------------*/



html,body{
	width:100%;
	height:100%;
}
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
li{
	list-style:none;
}
a{
	text-decoration:none;
	color:#fff;
}
.f-l{
	float:left;
}
.f-r{
	float:right;
}
.bg{
	position:fixed;
	width:100%;
	height:100%;
	background-image: url(bg1.jpg);
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
}
.bg:after{
	position:absolute;
	content:'';
	width:100%;
	height:100%;
	background: rgba(0,0,0,0.4);
}
.header{
	position:absolute;
	width:200px;
	top:50px;
	z-index:999;
}
.header img{
	width:100%;
}
.wrap{
	position:relative;
	width:1200px;
	height:90%;
	top:50px;
	margin:auto;
}

.nav>ul{
	display:flex;
}
.nav li{
	text-align:center;
}
.nav a{
	display:block;
}
.nav .level1{
	position:relative;
	flex:1;
}
.nav .level1>a{
	padding:15px 0;
	background: #800000;
}
.nav .level1:hover .level2{
	display:block;
}
.nav .level2 li:hover a{
	opacity:0.9;
}
.nav .level2{
	position:absolute;
	display:none;
	width:100%;
	z-index:999;
}
.nav .level2 a{
	padding:10px 0;
	background: #800000;
	opacity:0.6;
}
.content{
	padding:20px 0;
	height:90%;
	overflow:hidden;
}
.content h3{
	color: #fff;
    margin-bottom: 10px;
	clear:both;
}
.main{
	position:relative;
	width:435px;
	height:245px;
	border:1px solid #fff;
	margin-bottom:10px;
}
.main img{
	width:100%;
	height:100%;
}
.main ul{
	display:flex;
	position:absolute;
	border:1px solid #fff;
}
.main li{
	text-align:center;
	background: #000;
	opacity:0.5;
	flex:1;
}
.main li a{
	display:block;
	height:42px;
	padding:10px 0;
}
.main .on{
	opacity:1;
}	
.main1 ul{
	width:100%;
}

.main2 ul{
	flex-direction:column;
	height:100%;
	top:0;
	right:0;
}

.main3{
	position:relative;
	width:750px;
	height:535px;
	border:1px solid #fff;
}
.main3>img{
	width:100%;
	height:100%;
}
.main3>a{
	position:absolute;
	display:block;
	width:44px;
	height:64px;
	background: #000;
	padding:10px;
	z-index:999;
	top:45%;
}
.main3 a:nth-child(2){
	right:0;
}
.main3 ul{
	position:absolute;
	bottom:0;
	display:flex;
	left:38%;
}
.main3 ul li{
	background: #000;
	padding:0 10px;
	margin:0 5px;
	border-radius:100px;
}
.thema{
	position:absolute;
	width:150px;
	height:200px;
	background: rgba(255,255,255,.5);
	text-align:center;
	top:-170px;
	right:0;
	transition: all .5s;
	cursor:pointer;
}
.thema.on{
	top:0 !important;
}
.thema h2{
	position:absolute;
	width:100%;
	bottom:0px;
	color:orange;
}
.thema a{
	display:block;
	padding:10px;
}
.thema li:hover{
	background: rgba(0,0,0,.5);
}
.main3 .on {
	background: #fff;
}
.main3 .on a{
	color:#000;
}
.Quick{
	position:relative;
	width:100%;
	height:138px;
}
.Quick ul{
	position:absolute;
	display:flex;
	left:0;
}
.Quick>a{
	position:absolute;
	display:block;
	width:44px;
	height:64px;
	padding:10px;
	z-index:999;
}
.Quick>a:nth-child(2){
	right:0;
}





/*----------- tour2000.js -----------------*/

$(function(){
	var idx2=0;
	$('.thema').click(function(){
		$(this).toggleClass('on');
	})
	$('.thema li').click(function(){
		var idx=$(this).index()
		$('.bg').css({'background-image':'url(bg'+(idx+1)+'.jpg)'})
	})
	$('.main1 li').click(function(){
		var idx=$(this).index()
		$('.main1 li').removeClass('on')
		$(this).addClass('on')
		$('.main1 img').attr({'src':'tab1-'+(idx+1)+'.jpg'})
	})
	$('.main2 li').click(function(){
		var idx=$(this).index()
		$('.main2 li').removeClass('on')
		$(this).addClass('on')
		$('.main2 img').attr({'src':'tab2-'+(idx+1)+'.jpg'})
	})
	$('.main3 li').click(function(){
		idx2=$(this).index()
		$('.main3 li').removeClass('on')
		$(this).addClass('on')
		$('.main3>img').attr({'src':'slider'+(idx2+1)+'.jpg'})
	})
	$('.main3 .btnNext').click(function(){
		if(idx2<3){
			idx2=idx2+1;
			$('.main3>img').attr({'src':'slider'+(idx2+1)+'.jpg'})
			$('.main3 li').removeClass('on')
			$('.main3 li:nth-child('+(idx2+1)+')').addClass('on')
		}else{
			idx2=0;
			$('.main3>img').attr({'src':'slider'+(idx2+1)+'.jpg'})
			$('.main3 li').removeClass('on')
			$('.main3 li:nth-child('+(idx2+1)+')').addClass('on')
		}
	})
	$('.main3 .btnPrev').click(function(){
		if(idx2>0){
			idx2=idx2-1;
			$('.main3>img').attr({'src':'slider'+(idx2+1)+'.jpg'})
			$('.main3 li').removeClass('on')
			$('.main3 li:nth-child('+(idx2+1)+')').addClass('on')
		}else{
			idx2=3;
			$('.main3>img').attr({'src':'slider'+(idx2+1)+'.jpg'})
			$('.main3 li').removeClass('on')
			$('.main3 li:nth-child('+(idx2+1)+')').addClass('on')
		}
	})
	
	// Quick Search
	var timer=setInterval(move,20)
	var mleft=-156 //처음 left값
	
	$('.Quick ul').css({'left':'mleft'})
	
	function move(){
			mleft-=2;
			$('.Quick ul').css({'left':mleft})
			if(mleft==-158){ //move 실행 처음
				$('.Quick li').first().appendTo('.Quick ul'); //처음을 ul 마지막에 붙임
			}else if(mleft<=-312){ //두번째를 다시 처음으로 만듬
				mleft=-156
			}
	}
	$('.Quick ul').mouseenter(function(){
		clearInterval(timer)
	})
	$('.Quick ul').mouseleave(function(){
		timer=setInterval(move,20)
	})
	
	$('.Quick .btnPrev').click(function(){
		clearInterval(timer)
		$('.Quick li').first().appendTo('.Quick ul') //처음이 ul 마지막에 붙임	
	})
	$('.Quick .btnNext').click(function(){
		clearInterval(timer)
		$('.Quick li').last().prependTo('.Quick ul') //마지막이 ul 처음에 붙임
	})
})





<!-------------------tour2000.html------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tour2000</title>
	<link rel="stylesheet" href="Tour2000.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="Tour2000.js"></script>
</head>
<body>
	<div class="bg">
	</div>
	<div class="header">
		<h1><img src="logo.png" alt=""></h1>
	</div>
	<div class="wrap">
		<div class="nav">
			<ul>
				<li class="level1"><a href="#">유럽</a>
					<ul class="level2">
						<li><a href="#">서유럽</a></li>
						<li><a href="#">동유럽/발칸</a></li>
						<li><a href="#">발칸반도</a></li>
						<li><a href="#">스페인</a></li>
						<li><a href="#">지중해</a></li>
					</ul>
				</li>
				<li class="level1"><a href="#">중국/대만</a>
					<ul class="level2">
						<li><a href="#">대만</a></li>
						<li><a href="#">이탈리아</a></li>
						<li><a href="#">북경</a></li>
						<li><a href="#">청도</a></li>
						<li><a href="#">황산</a></li>
					</ul>
				</li>
				<li class="level1"><a href="#">동남아</a>
					<ul class="level2">
						<li><a href="#">동남아</a></li>
						<li><a href="#">인도차이나</a></li>
						<li><a href="#">태국</a></li>
						<li><a href="#">필리핀</a></li>
						<li><a href="#">홍콩/마카오</a></li>
					</ul>
				</li>
				<li class="level1"><a href="#">일본</a>
					<ul class="level2">
						<li><a href="#">큐수</a></li>
						<li><a href="#">북해도</a></li>
						<li><a href="#">동경</a></li>
						<li><a href="#">중부지방</a></li>
						<li><a href="#">오키나와</a></li>
					</ul>
				</li>
				<li class="level1"><a href="#">미주/특수</a>
					<ul class="level2">
						<li><a href="#">미서부</a></li>
						<li><a href="#">미동부</a></li>
						<li><a href="#">미주여행</a></li>
						<li><a href="#">캐나다</a></li>
						<li><a href="#">하와이</a></li>
					</ul>
				</li>
				<li class="level1"><a href="#">남태평양</a>
					<ul class="level2">
						<li><a href="#">호주</a></li>
						<li><a href="#">뉴질랜드</a></li>
						<li><a href="#">사이판</a></li>
						<li><a href="#">괌</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="content">
			<div class="f-l">
				<h3>| 타입별 여행지</h3>
				<div class="main1 main">
					<ul>
						<li class="on"><a href="#">산마리노</a></li>
						<li><a href="#">폼페이</a></li>
						<li><a href="#">프랑스</a></li>
						<li><a href="#">이탈리아</a></li>
						<li><a href="#">포지타노</a></li>
					</ul>
					<img src="tab1-1.jpg" alt="">
				</div>
				<h3>| 테마 여행지</h3>
				<div class="main2 main">
					<ul>
						<li class="on"><a href="#">체코</a></li>
						<li><a href="#">일본</a></li>
						<li><a href="#">일본</a></li>
						<li><a href="#">스페인</a></li>
						<li><a href="#">호주</a></li>
					</ul>
					<img src="tab2-1.jpg" alt="">
				</div>
			</div>
			<div class="f-r">
				<h3>| Tour 2000 신상품</h3>
				<div class="main3">
					<img src="slider1.jpg" alt="">
					<a href="#" class="btnNext"><img src="btnNext.png" alt=""></a>
					<a href="#" class="btnPrev"><img src="btnPrev.png" alt=""></a>
					<ul>
						<li class='on'><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li><a href="#">4</a></li>
					</ul>
				</div>
			</div>
			<h3>| Quick Search</h3>
			<div class="Quick">
				<ul>
					<li><img src="b1.jpg" alt=""></li>
					<li><img src="b2.jpg" alt=""></li>
					<li><img src="b3.jpg" alt=""></li>
					<li><img src="b4.jpg" alt=""></li>
					<li><img src="b5.jpg" alt=""></li>
					<li><img src="b6.jpg" alt=""></li>
					<li><img src="b7.jpg" alt=""></li>
					<li><img src="b8.jpg" alt=""></li>
					<li><img src="b9.jpg" alt=""></li>
					<li><img src="b10.jpg" alt=""></li>
					<li><img src="b11.jpg" alt=""></li>
					<li><img src="b12.jpg" alt=""></li>
					<li><img src="b13.jpg" alt=""></li>
				</ul>
				<a href="#" class="btnNext"><img src="btnNext.png" alt=""></a>
				<a href="#" class="btnPrev"><img src="btnPrev.png" alt=""></a>
			</div>
		</div>
		
	</div>
	<div class="thema">
		<h2>Thema</h2>
		<ul>
			<li><a href="#">Thema1</a></li>
			<li><a href="#">Thema2</a></li>
			<li><a href="#">Thema3</a></li>
			<li><a href="#">Thema4</a></li>
		</ul>
	</div>
</body>
</html>




실행결과