혹시 j쿼리에 div class를 자동으로 1부터~6까지 움직이게 하는 소스좀..ㅠㅠ 채택완료
와이쿠
6년 전
조회 2,149
일전에 애드프로님 소스 코드
</p>
<pre>
<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개
채택된 답변
+20 포인트
6년 전
제가 잘 이해하고 코드를 짠건지는 모르겠네요..
</p>
<p><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></p>
<p> </p>
<p><script>
$(function(){
banner_change();
});
var index = 2;
function banner_change() {
setTimeout(function(){
$(".banner").hide();
$(".banner" + index).show();</p>
<p> if(index == 4)
index = 1;
else
index++;</p>
<p> banner_change();
},100000);
console.log(index);
}
</script></p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
와이쿠
6년 전
댓글을 작성하려면 로그인이 필요합니다.
6년 전
</p>
<p><meta charset="utf-8">
<script src="<a href="http://code.jquery.com/jquery-2.2.4.min.js"></script>" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-2.2.4.min.js"></script></a>
<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></p>
<p>참고하시라고 올립니다.
jquery로 하면 trigger 메소드로 좀 더 편하게 가능합니다.
초는 테스트로 1000으로 넣었으니 바꾸시면 됩니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
와이쿠
6년 전
와 다양한 방법이 있네요..감사합니다..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
잘 작동 합니다..ㅠㅠ