<!DOCTYPE HTML> <html> <head><title>롤링 배너 만들기 연습</title> <meta http-equiv="Content-Type" Content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <style type="text/css"> <!-- body {font-size:11pt; padding:0; margin:0; text-align: center;} h3 {color: #85144b; font-size: 14pt; margin:10 auto; padding: 10px;} .contents {width: 800px; height: 400px; background-color: #d6d6d6; margin: 0 auto;} /* banner */ .banner {position: relative; width: 340px; height: 210px; top: 50px; margin:0 auto; padding:0; overflow: hidden;} .banner ul {position: absolute; margin: 0px; padding:0; list-style: none; } .banner ul li {float: left; width: 340px; height: 210px; margin:0; padding:0;} //--> </style> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script language="JavaScript"> <!-- $(document).ready(function() { //사용할 배너 var $banner = $(".banner").find("ul"); var $bannerWidth = $banner.children().outerWidth();//배너 이미지의 폭 var $bannerHeight = $banner.children().outerHeight(); // 높이 var $bannerLength = $banner.children().length;//배너 이미지의 갯수 var rollingId; //정해진 초마다 함수 실행 rollingId = setInterval(function() { rollingStart(); }, 3000);//다음 이미지로 롤링 애니메이션 할 시간차 //마우스 오버시 롤링을 멈춘다. banner.mouseover(function(){ //중지 clearInterval(rollingId); $(this).css("cursor", "pointer"); }); //마우스 아웃되면 다시 시작 banner.mouseout(function(){ rollingId = setInterval(function() { rollingStart(); }, 3000); $(this).css("cursor", "default"); }); function rollingStart() { $banner.css("width", $bannerWidth * $bannerLength + "px"); $banner.css("height", $bannerHeight + "px"); //alert(bannerHeight); //배너의 좌측 위치를 옮겨 준다. $banner.animate({left: - $bannerWidth + "px"}, 1500, function() { //숫자는 롤링 진행되는 시간이다. //첫번째 이미지를 마지막 끝에 복사(이동이 아니라 복사)해서 추가한다. $(this).append("<li>" + $(this).find("li:first").html() + "</li>"); //뒤로 복사된 첫번재 이미지는 필요 없으니 삭제한다. $(this).find("li:first").remove(); //다음 움직임을 위해서 배너 좌측의 위치값을 초기화 한다. $(this).css("left", 0); //이 과정을 반복하면서 계속 롤링하는 배너를 만들 수 있다. }); } }); //--> </script> </head> <body> <div class="contents"> <h3> 자동 롤링 배너 만들기 </h3> <div class="banner"> <ul> <li><img src="//cdn.pixabay.com/photo/2016/02/01/16/10/eye-1173863__340.jpg" width="340" height="210px"></li> <li><img src="//cdn.pixabay.com/photo/2017/12/30/13/25/portrait-3050076__340.jpg" width="340" height="210px"></li> <li><img src="//cdn.pixabay.com/photo/2015/07/09/22/45/tree-838667__340.jpg" width="340" height="210px"></li> <li><img src="//cdn.pixabay.com/photo/2016/03/05/20/01/art-1238602__340.jpg" width="340" height="210px"></li> <li><img src="//cdn.pixabay.com/photo/2015/07/31/15/01/guitar-869217__340.jpg" width="340" height="210px"></li> </ul> </div> </div> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script>
$(function(){
// <ul id="banner">를 list 변수에 참조
var list = $("#banner");
// 프레임의 사진 노출 개수
var showNum = 3;
// 이전, 다음 버튼을 클릭할 때마다 증감되는 값
var num = 0;
// 총 <li>의 개수 5가 저장된다.
var total = $(">li", list).size();
// <li>의 너빗값 80이 저장된다.
var liWidth = $("li:first", list).width();
/*
<li> 태그 중 인덱스 값이 3보다 작은 <li> 태그만 복제한다.
그러므로 0,1,2 인덱스에 해당하는 <li> 태그가 복제되어
<ul id="banner">에 추가한다.
*/
var copyObj = $(">li:lt("+showNum+")", list).clone();
list.append(copyObj);
// 다음 버튼을 클릭할 때마다 이벤트 핸들러를 실행한다.
$(".next").on("click", function(){
if(num == total){ // num값이 5일 경우 조건문을 실행
num = 0; // num값 초기화
list.css("margin-left",num); // 배너가 첫 부분으로 이동
}
num++;
list.stop().animate({marginLeft:-liWidth*num+"px"},500);
return false;
});
// 이전 버튼을 클릭할 때마다 이벤트 핸들러를 실행한다.
$(".prev").on("click", function(){
if(num == 0){ // num값이 0일 경우 조건문을 수행
num = total; // num값이 5가 된다.
// 배너가 400px만큼 이동
list.css("margin-left", -num*liWidth+"px");
}
num--;
list.stop().animate({marginLeft:-liWidth*num+"px"},500);
return false;
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
img{
border:none;
vertical-align:top;
}
li{
list-style:none;
float:left;
width:80px;
}
h2{
text-align:center;
}
#bannerWrap{
width:260px;
padding:10px 20px;
margin:0 auto;
border:1px solid #aaa
}
#banner{
width:5000px;
}
#frame{
width:232px;
overflow:hidden;
position:relative;
margin:10px auto;
}
</style>
</head>
<body>
<h2>롤링 슬라이드 배너 만들기</h2>
<div id="bannerWrap">
<div id="frame">
<ul id="banner">
<li>
<a href="#"><img src="image/pic1.jpg" alt="사진1"></a>
</li>
<li>
<a href="#"><img src="image/pic2.jpg" alt="사진2"></a>
</li>
<li>
<a href="#"><img src="image/pic3.jpg" alt="사진3"></a>
</li>
<li>
<a href="#"><img src="image/pic4.jpg" alt="사진4"></a>
</li>
<li>
<a href="#"><img src="image/pic5.jpg" alt="사진5"></a>
</li>
</ul>
</div>
<p>
<button class="prev">
<img src="image/prevBtn.png" alt="이전 버튼">
</button>
<button class="next">
<img src="image/nextBtn.png" alt="다음 버튼">
</button>
</p>
</div>
</body>
</html>
Colored by Color Scripter