javascript jquery 롤링
페이지 정보
본문
<html>
<head>
<title>test49</title>
<meta http-equiv=\"ContentType\" content=\"text/html; charset=euc-kr\" />
<script src =\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\" type=\"text/javascript\"></script>
<script src=\"jQuery.print.plugin.js\" type=\"text/javascript\"></script>
<style type=\"text/css\">
ul , li
{
list-style:none;
}
div , span , img , ul , li
{
margin:0;
padding:0;
float:left;
}
#gallery
{
position:relative;
top:200px;
left:200px;
width:370px;
height:280px;
}
#viewer
{
width:300px;
height:280px;
}
#viewer span
{
overflow:hidden;
height:280px;
position:absolute;
}
#viewer img
{
position:relative;
top:-20px;
display:none;
}
#nav
{
overflow:hidden;
position:absolute;
width:70px;
height:280px;
left:300px;
}
#nav img
{
cursor:pointer;
}
</style>
<script language=\"javascript\" type=\"text/javascript\">
$(document).ready(function (event)
{
var cn = 0;
var tn = 4;
var sp = 500;
var timer;
var timeN = 5000;
$('#nav > ul > li >img').fadeTo(1,0.5)
$('#nav > ul > li:eq(0) > img').fadeTo(1,1);
$('#viewer > span:eq(0) > img').fadeTo(1,1);
$('#nav > ul > li > img').click(function()
{
var n = $(this).attr('num');
viewerIn(n)
})
.mouseenter(function()
{
clearInterval(timer);
})
.mouseleave(function()
{
timer = setInterval(playfunc,timeN);
});
timer = setInterval(playfunc,timeN);
function playfunc()
{
var mn = cn;
mn++;
if(tn == mn)
{
mn = 0;
}
viewerIn(mn);
}
function viewerIn(n)
{
if( n != cn )
{
$('#nav > ul > li:eq('+cn+') > img').fadeTo(sp,0.5);
$('#nav > ul > li:eq('+n+') > img').fadeTo(sp,1);
$('#viewer > span:eq('+cn+') > img').fadeTo(sp,0);
$('#viewer > span:eq('+n+') > img').fadeTo(sp,1);
}
cn = n;
}
});
</script>
</head>
<body>
<div id=\"gallery\">
<div id=\"viewer\">
<span><img src=\"images/test1.jpg\" width = '300' height = '300' num=\"0\"/></span>
<span><img src=\"images/test2.jpg\" width = '300' height = '300' num=\"1\"/></span>
<span><img src=\"images/test3.jpg\" width = '300' height = '300' num=\"2\"/></span>
<span><img src=\"images/test4.jpg\" width = '300' height = '300' num=\"3\"/></span>
<span><img src=\"images/test5.jpg\" width = '300' height = '300' num=\"4\"/></span>
<span><img src=\"images/test6.jpg\" width = '300' height = '300' num=\"5\"/></span>
</div>
<div id=\"nav\">
<ul>
<li><img src=\"images/test1.jpg\" width = '70' height = '70' num=\"0\"/></li>
<li><img src=\"images/test2.jpg\" width = '70' height = '70' num=\"1\"/></li>
<li><img src=\"images/test3.jpg\" width = '70' height = '70' num=\"2\"/></li>
<li><img src=\"images/test4.jpg\" width = '70' height = '70' num=\"3\"/></li>
<li><img src=\"images/test5.jpg\" width = '70' height = '70' num=\"4\"/></li>
<li><img src=\"images/test6.jpg\" width = '70' height = '70' num=\"5\"/></li>
</ul>
</div>
</div>
</body>
</html>
<head>
<title>test49</title>
<meta http-equiv=\"ContentType\" content=\"text/html; charset=euc-kr\" />
<script src =\"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\" type=\"text/javascript\"></script>
<script src=\"jQuery.print.plugin.js\" type=\"text/javascript\"></script>
<style type=\"text/css\">
ul , li
{
list-style:none;
}
div , span , img , ul , li
{
margin:0;
padding:0;
float:left;
}
#gallery
{
position:relative;
top:200px;
left:200px;
width:370px;
height:280px;
}
#viewer
{
width:300px;
height:280px;
}
#viewer span
{
overflow:hidden;
height:280px;
position:absolute;
}
#viewer img
{
position:relative;
top:-20px;
display:none;
}
#nav
{
overflow:hidden;
position:absolute;
width:70px;
height:280px;
left:300px;
}
#nav img
{
cursor:pointer;
}
</style>
<script language=\"javascript\" type=\"text/javascript\">
$(document).ready(function (event)
{
var cn = 0;
var tn = 4;
var sp = 500;
var timer;
var timeN = 5000;
$('#nav > ul > li >img').fadeTo(1,0.5)
$('#nav > ul > li:eq(0) > img').fadeTo(1,1);
$('#viewer > span:eq(0) > img').fadeTo(1,1);
$('#nav > ul > li > img').click(function()
{
var n = $(this).attr('num');
viewerIn(n)
})
.mouseenter(function()
{
clearInterval(timer);
})
.mouseleave(function()
{
timer = setInterval(playfunc,timeN);
});
timer = setInterval(playfunc,timeN);
function playfunc()
{
var mn = cn;
mn++;
if(tn == mn)
{
mn = 0;
}
viewerIn(mn);
}
function viewerIn(n)
{
if( n != cn )
{
$('#nav > ul > li:eq('+cn+') > img').fadeTo(sp,0.5);
$('#nav > ul > li:eq('+n+') > img').fadeTo(sp,1);
$('#viewer > span:eq('+cn+') > img').fadeTo(sp,0);
$('#viewer > span:eq('+n+') > img').fadeTo(sp,1);
}
cn = n;
}
});
</script>
</head>
<body>
<div id=\"gallery\">
<div id=\"viewer\">
<span><img src=\"images/test1.jpg\" width = '300' height = '300' num=\"0\"/></span>
<span><img src=\"images/test2.jpg\" width = '300' height = '300' num=\"1\"/></span>
<span><img src=\"images/test3.jpg\" width = '300' height = '300' num=\"2\"/></span>
<span><img src=\"images/test4.jpg\" width = '300' height = '300' num=\"3\"/></span>
<span><img src=\"images/test5.jpg\" width = '300' height = '300' num=\"4\"/></span>
<span><img src=\"images/test6.jpg\" width = '300' height = '300' num=\"5\"/></span>
</div>
<div id=\"nav\">
<ul>
<li><img src=\"images/test1.jpg\" width = '70' height = '70' num=\"0\"/></li>
<li><img src=\"images/test2.jpg\" width = '70' height = '70' num=\"1\"/></li>
<li><img src=\"images/test3.jpg\" width = '70' height = '70' num=\"2\"/></li>
<li><img src=\"images/test4.jpg\" width = '70' height = '70' num=\"3\"/></li>
<li><img src=\"images/test5.jpg\" width = '70' height = '70' num=\"4\"/></li>
<li><img src=\"images/test6.jpg\" width = '70' height = '70' num=\"5\"/></li>
</ul>
</div>
</div>
</body>
</html>
- 이전글javascript 셀렉트박스 자바스크립트 선택 20.02.21
- 다음글mysql 백업 하는 방법 20.02.21
댓글목록
등록된 댓글이 없습니다.