[jQuery] 18.실습: fter(Wheelmouse)

in Web on jQuery


실습: fter(Wheelmouse)




/*----------- fter.css -----------------*/

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
body{
	overflow:hidden;
}
li{
	list-style:none;
}
.main{
	margin-top:200px;
	width:500%;
	height:500px;
	position:relative;
	overflow:hidden;
}
.main li{
	width:5%;
	float:left;
	height:100%;
}
.main li img{
	width:100%;
	height:100%;
}
button{
	position:fixed;
	background: none;
	border:none;
	cursor:pointer;
}
.next{
	bottom:200px;
	right:10px;
}
.prev{
	bottom:200px;
	left:10px;
}





/*----------- fter.js -----------------*/

$(function(){
	/*appentTo 사용하면 과정이 보이므로 하나 앞으로 땡겨놓는다.*/
	$('.main').css({'left':'-25%'});
	
	$('.next').click(function(){
		nextMove();
	})
	
	$('.prev').click(function(){
		prevMove();
	})
	
	$('.main').mousewheel(function(event,delta){
		if(delta>0){ 
			nextMove();
		}else if(delta<0){ 
			prevMove();
		}
	})
	
	function prevMove(){
		$('.main').animate({'left':'-50%'},500,function(){
			$('.main li').first().appendTo('.main');
			$('.main').css({'left':'-25%'});
		});
	}
	function nextMove(){
		$('.main').animate({'left':'0%'},500,function(){
			$('.main li').last().prependTo('.main');
			$('.main').css({'left':'-25%'})
		});
	}
})





<!-------------------fter.html------------------->

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>fter</title>
	<link rel="stylesheet" href="fter.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="fter.js"></script>
	<script src="jquery.mousewheel.js"></script>
</head>
<body>
	<ul class="main">
		<li><img src="bg1.jpg" alt=""></li>
		<li><img src="bg2.jpg" alt=""></li>
		<li><img src="bg3.jpg" alt=""></li>
		<li><img src="bg4.jpg" alt=""></li>
		<li><img src="bg5.jpg" alt=""></li>
		<li><img src="bg6.jpg" alt=""></li>
		<li><img src="bg7.jpg" alt=""></li>
		<li><img src="bg8.jpg" alt=""></li>
		<li><img src="bg9.jpg" alt=""></li>
		<li><img src="bg10.jpg" alt=""></li>
		<li><img src="bg11.jpg" alt=""></li>
		<li><img src="bg12.jpg" alt=""></li>
		<li><img src="bg13.jpg" alt=""></li>
		<li><img src="bg14.jpg" alt=""></li>
		<li><img src="bg15.jpg" alt=""></li>
		<li><img src="bg16.jpg" alt=""></li>
		<li><img src="bg17.jpg" alt=""></li>
		<li><img src="bg18.jpg" alt=""></li>
		<li><img src="bg19.jpg" alt=""></li>
		<li><img src="bg20.jpg" alt=""></li>
	</ul>

	<button class="prev"><img src="prev.png" alt=""></button>
	<button class="next"><img src="next.png" alt=""></button>
</body>
</html>




실행결과