자바스크립트 fadein out 가운데 정렬이요.
이미지 fadein fadeout 되는 자바스크립트입니다.
뜯어고쳐 쓰는 중인데요.
이미지 출력이 좌측으로 쏠리네요...
바디쪽에 화변에 보이는 부분에 align="center"등은 안 먹는 것같고....
#Rolling DIV {
position:absolute;
가 절대값이여서 relative로 바꾸니.. 아미지 들이 수직으로 쭉~ 나열되 버리네요...
이미지가 왼쪽으로 쏠리는데 화면창의 크기에 상관없이 가운데 정열하는 법 아시나요?
도움 부탁드립니다.
===================================================
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Rolling Banner Test</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<!-- Rolling Banner JavaScript-->
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#Rolling DIV.active');
if ($active.length == 0) $active = $('#Rolling DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#Rolling DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 500, function () {
$active.removeClass('active last-active');
});
}
$(function () {
setInterval("slideSwitch()", 5000);
});
</script>
<!-- Rolling Banner Style CSS-->
<style type="text/css">
/*** set the width and height to match your images **/
#Rolling {
position:relative;
height:385px;
}
#Rolling DIV {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
height: 385px;
background-color: #FFF;
}
#Rolling DIV.active {
z-index:10;
opacity:1.0;
}
#Rolling DIV.last-active {
z-index:9;
}
#Rolling DIV IMG {
height: 385px;
display: block;
border: 0;
margin-bottom: 10px;
}
</style>
</head>
<body align="center">
<div class="boxstyle_01" id="Rolling" >
<!-- style css값과 동일한 id 값 입력 -->
<div class="active">
<a href="http://www.naver.com" target="_blank"><img src="image/1.jpg" alt="BannerTest1"></a>
</div>
<div>
<a href="http://www.naver.com" target="_blank"><img src="image/2.jpg" alt="BannerTest2"></a>
</div>
</div>
</body>
</html>
뜯어고쳐 쓰는 중인데요.
이미지 출력이 좌측으로 쏠리네요...
바디쪽에 화변에 보이는 부분에 align="center"등은 안 먹는 것같고....
#Rolling DIV {
position:absolute;
가 절대값이여서 relative로 바꾸니.. 아미지 들이 수직으로 쭉~ 나열되 버리네요...
이미지가 왼쪽으로 쏠리는데 화면창의 크기에 상관없이 가운데 정열하는 법 아시나요?
도움 부탁드립니다.
===================================================
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>Rolling Banner Test</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<!-- Rolling Banner JavaScript-->
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#Rolling DIV.active');
if ($active.length == 0) $active = $('#Rolling DIV:last');
// use this to pull the divs in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#Rolling DIV:first');
// uncomment below to pull the divs randomly
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 500, function () {
$active.removeClass('active last-active');
});
}
$(function () {
setInterval("slideSwitch()", 5000);
});
</script>
<!-- Rolling Banner Style CSS-->
<style type="text/css">
/*** set the width and height to match your images **/
#Rolling {
position:relative;
height:385px;
}
#Rolling DIV {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
height: 385px;
background-color: #FFF;
}
#Rolling DIV.active {
z-index:10;
opacity:1.0;
}
#Rolling DIV.last-active {
z-index:9;
}
#Rolling DIV IMG {
height: 385px;
display: block;
border: 0;
margin-bottom: 10px;
}
</style>
</head>
<body align="center">
<div class="boxstyle_01" id="Rolling" >
<!-- style css값과 동일한 id 값 입력 -->
<div class="active">
<a href="http://www.naver.com" target="_blank"><img src="image/1.jpg" alt="BannerTest1"></a>
</div>
<div>
<a href="http://www.naver.com" target="_blank"><img src="image/2.jpg" alt="BannerTest2"></a>
</div>
</div>
</body>
</html>
|
댓글을 작성하시려면 로그인이 필요합니다.