반응형

 

 

[javascript] 자동롤링되는 실시간검색어 만들기

 

데이터를 입히기 전, 자동롤링이 되는 실시간 검색어를 만들어보려합니다. 

일반 포털사이트(네이버,다음,네이트)같은 실시간 검색어창이 아니라 심플하게 단순한 한줄자리로 만들어보았는데요. 

 

먼저 </head> 안에 제이쿼리 스크립트를 넣어주세요. 

 

 

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

 

 

그다음, <body>에 해당 예제 뼈대를 만들어주시구요.

 

 

 

	<div id="wrap">
		<div class="container">
			<ul id="best_search">
				<li><p>인기검색어</p></li>
				<li>
					<dl class="time1" style="display:">
						<dd><a class="t" href="#"><div class="num">1</div>자전거</a></dd>
						<dd><a class="t" href="#"><div class="num">2</div>전동킥보드</a></dd>
						<dd><a class="t" href="#"><div class="num">3</div>비키니</a></dd>
						<dd><a class="t" href="#"><div class="num">4</div>모노키니</a></dd>
						<dd><a class="t" href="#"><div class="num">5</div>원터치텐트</a></dd>
					</dl>
					<dl class="time2" style="display:none;">
						<dd><a class="t" href="#"><div class="num">6</div>등산화</a></dd>
						<dd><a class="t" href="#"><div class="num">7</div>풋살화</a></dd>
						<dd><a class="t" href="#"><div class="num">8</div>요가복</a></dd>
						<dd><a class="t" href="#"><div class="num">9</div>텐트</a></dd>
						<dd><a class="t" href="#"><div class="num">10</div>래쉬가드</a></dd>
					</dl>
					<dl class="time3" style="display:none;">
						<dd><a class="t" href="#"><div class="num">11</div>수영복</a></dd>
						<dd><a class="t" href="#"><div class="num">12</div>디스커버리반팔티</a></dd>
						<dd><a class="t" href="#"><div class="num">13</div>축구화</a></dd>
						<dd><a class="t" href="#"><div class="num">14</div>노스페이스바람막이</a></dd>
						<dd><a class="t" href="#"><div class="num">15</div>전기자전거</a></dd>
					</dl>
					<dl class="time4" style="display:none;">
						<dd><a class="t" href="#"><div class="num">16</div>캠핑카</a></dd>
						<dd><a class="t" href="#"><div class="num">17</div>캠핑테이블</a></dd>
						<dd><a class="t" href="#"><div class="num">18</div>여성골프웨어</a></dd>
						<dd><a class="t" href="#"><div class="num">19</div>여성래쉬가드</a></dd>
						<dd><a class="t" href="#"><div class="num">20</div>캠핑의자</a></dd>
					</dl>
				</li>
				<li>
					<a class="best_add ad1" style="cursor:pointer" onClick="javascript:view('0')">></a>
					<a class="best_add ad2" onClick="javascript:view('1')" style="display:none;cursor:pointer" >></a>
					<a class="best_add ad3" onClick="javascript:view('2')" style="display:none;cursor:pointer" >></a>
					<a class="best_add ad4" onClick="javascript:view('3')" style="display:none;cursor:pointer" ><</a>
				</li>
			</ul>
		</div>
   </div>
  

 

 

 

css로 디자인해주세요. <style></style>사이로 소스를 넣어주셔도 됩니다.

글꼴을 이쁘게 만들고 싶어서 나눔스퀘어 폰트를 넣었습니다만 취향에 따라 글꼴을 다르게 설정하셔도 됩니다.

 

 

 

@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
.normal     { font-weight: 400 }
.bold       { font-weight: 700 }
.bolder     { font-weight: 800 }
.light      { font-weight: 300 }

html,body {
	padding:0px;
	margin:0px;
	font-family: 'NanumSquare', sans-serif;
	position:relative;
}
#wrap {
	margin:0px;
	padding:0px;
	width:100%;
}
.container {
	width:1240px;
	margin:0 auto;
}
a,img {
	border:0px;
	text-decoration:none;
}
ul,li {
	list-style:none;
	padding:0px;
	margin:0px;
}
h1 {
	color:#525252;
	font-size:40px;
	font-weight:100;
	text-align:center;
	margin:0px;
	margin-top:193px;
}
h1 > b {
	font-weight:900;
}

#best_search {
	width:740px;
	margin:0 auto;
	padding-top:50px;
	text-align:center;
}
#best_search li,dd {
	display:inline-block;
	vertical-align:middle;
}
button {
	width:121px;
	background-color:#0085e2;
	color:#fff;
	border:0px;
	height:63px;
	margin-left:-5px;
	padding:0px;
	font-size:18px;
}
#best_search li p {
	color:#393939;
	font-size:17px;
	font-weight:bold;
	margin:0px;
	padding-right:30px;
}
dd {
	margin:0px;
}
dd  a.t{
	cursor:pointer;
	margin:0px;
	color:#4b4b4b;
	text-overflow:ellipsis;
	overflow:hidden;
	width:94px;
	white-space:nowrap;
	display:inline-block;
	font-size:17px;
	text-align:left;
	padding-right:13px;
	font-weight:700;
	vertical-align:middle;
}
dd .num {
	background-color:#4b4b4b;
	color:#fff;
	font-size:10px;
	margin-right:10px;
	vertical-align:middle;
	width:18px;
	height:18px;
	float:left;
	line-height:18px;
	text-align:center;
}
.best_add {
	border:1px solid #bebebe;
	color:#4b4b4b;
	padding:0px 4px;
	margin-left:10px;
}

 

 

 

마지막으로 <script></script> 사이로 스크립트를 넣어주시면 완성입니다.

 

 

 

function view(arg){
	$(".time1, .time2, .time3, .time4, .ad1, .ad2, .ad3, .ad4").css("display","none");
	if(arg=="0") {
		$(".time2, .ad2").css("display","block");
		viewcount = 1;
	}
	else if(arg=="1") {
		$(".time3, .ad3").css("display","block");
		viewcount = 2;
	}
	else if(arg=="2") {
		$(".time4, .ad4").css("display","block");
		viewcount = 3;
	}
	else if(arg=="3") {
		$(".time1, .ad1").css("display","block");
		viewcount = 0;
	}
}
var viewcount = 0;
var rtcarousel = setInterval(function(){ view(viewcount) },5000);

$("#best_search").mouseenter(function() {
	clearInterval(rtcarousel);
});

$("#best_search").mouseleave(function() {
	rtcarousel = setInterval(function(){ view(viewcount) },5000);
});

 

 

 

완성화면은 아래를 참고해주세요.

jsfiddle에 소스를 넣었더니 스크립트가 잘 먹히지 않아서 html 안으로 넣은 점 참고 부탁드립니다.

 

 

 

 

 

 

반응형