혹시 j쿼리에 div class를 자동으로 1부터~6까지 움직이게 하는 소스좀..ㅠㅠ
본문
일전에 애드프로님 소스 코드
<div style="position: relative;">
<div class="banner banner1" style="width:500px; height:300px; background:#fff100;"><h3>1번배너</h3></div>
<div class="banner banner2" style="width:500px; height:300px; background:#cc0000; display: none;"><h3>2번배너</h3></div>
<div class="banner banner3" style="width:500px; height:300px; background:#2FB300; display: none;"><h3>3번배너</h3></div>
<div class="banner banner4" style="width:500px; height:300px; background:#ddd; display: none;"><h3>4번배너</h3></div>
</div>
<span style="padding:10px; background:#fff100; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner1').css('display','block');">1번배너</span>
<span style="padding:10px; background:#ddd; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner2').css('display','block');">2번배너</span>
<span style="padding:10px; background:#fff100; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner3').css('display','block');">3번배너</span>
<span style="padding:10px; background:#ddd; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner4').css('display','block');">4번배너</span>
위의 소스를 사용하면 마우스를 롤오버 할 시 div 클래스 banner banner 1 또는 3번 이렇게 이동을 하거든요..
이 class 이름을 이용해서 자동으로 1번 100초 후 2번 이런식으로 자동으로 돌아가게 하고 싶은데요...
특별한 화면전환같은 기교는 필요없고 그냥 딱딱 바뀌어도 되는데...인터넷을 뒤져도 안나오니..
환장할 노릇이네요...ㅠㅠ
어려울것 같으면서도 쉬울것 같고..고수님들 어려울까요 ?
요점정리
div 클래스 banner1,banner2,banner3 이름이 다른 3개를
특저어 소스로 100초 후 banner1 보여주고 banner2로 자동이동...이거네용...
미리 고수님들에게 감사드립니다.
답변 2
제가 잘 이해하고 코드를 짠건지는 모르겠네요..
<div style="position: relative;">
<div class="banner banner1" style="width:500px; height:300px; background:#fff100;"><h3>1번배너</h3></div>
<div class="banner banner2" style="width:500px; height:300px; background:#cc0000; display: none;"><h3>2번배너</h3></div>
<div class="banner banner3" style="width:500px; height:300px; background:#2FB300; display: none;"><h3>3번배너</h3></div>
<div class="banner banner4" style="width:500px; height:300px; background:#ddd; display: none;"><h3>4번배너</h3></div>
</div>
<script>
$(function(){
banner_change();
});
var index = 2;
function banner_change() {
setTimeout(function(){
$(".banner").hide();
$(".banner" + index).show();
if(index == 4)
index = 1;
else
index++;
banner_change();
},100000);
console.log(index);
}
</script>
와 역시 냑은 다르네요...감사합니다..
잘 작동 합니다..ㅠㅠ
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<div style="position: relative;">
<div class="banner banner1" style="width:500px; height:300px; background:#fff100;"><h3>1번배너</h3></div>
<div class="banner banner2" style="width:500px; height:300px; background:#cc0000; display: none;"><h3>2번배너</h3></div>
<div class="banner banner3" style="width:500px; height:300px; background:#2FB300; display: none;"><h3>3번배너</h3></div>
<div class="banner banner4" style="width:500px; height:300px; background:#ddd; display: none;"><h3>4번배너</h3></div>
</div>
<span class="test" style="padding:10px; background:#fff100; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner1').css('display','block');">1번배너</span>
<span class="test" style="padding:10px; background:#ddd; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner2').css('display','block');">2번배너</span>
<span class="test" style="padding:10px; background:#fff100; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner3').css('display','block');">3번배너</span>
<span class="test" style="padding:10px; background:#ddd; cursor: pointer;" onmouseover="$('.banner').css('display','none'); $('.banner4').css('display','block');">4번배너</span>
<script>
$(function() {
var i = 0, l = $(".test").length;
setInterval(function() {
$(".test:eq(" + i + ")").trigger("mouseover");
i = i == (l - 1) ? 0 : i + 1;
}, 1000);
});
</script>
참고하시라고 올립니다.
jquery로 하면 trigger 메소드로 좀 더 편하게 가능합니다.
초는 테스트로 1000으로 넣었으니 바꾸시면 됩니다.
와 다양한 방법이 있네요..감사합니다..
답변을 작성하시기 전에 로그인 해주세요.
