제이쿼리 충돌?
본문
단독으로 썼을때는 구동이 되는데
메인페이지에 출력하려고 하니 구동이 안되는데여..
혹시 메인에 다른 슬라이드와 prev next 이름이 똑같아서 그런가여 ?
ㅠ;ㅠ 이름을 바꾸면 되나요 ? 된다면 어디어디를 바꿔야되는지 좀 알려주세요,ㅠㅠ
도와주세여 ..;
<div id="notice5" class="news" style="margin-top:30px; padding-top:0;"> <div class="open-event fl" style="width:400px;"> <ul class="notice-list"> <li><a href="#">1. '보코' 손승연, 美 버클리 음대 합격 "버클리도 반했다"</a><span class="date">2011.08.11</span></li> <li><a href="#">2. K팝스타 러브라인, 이승훈 두고 백아연·이미쉘 신경전?</a><span class="date">2011.08.11</span></li> <li><a href="#">3. '내 아내의 모든 것', '어벤져스' 제쳤다..예매율 1위...</a><span class="date">2011.08.11</span></li> <li><a href="#">4. '사랑비' 이미숙-정진영, 아름다운 이별…</a><span class="date">2011.08.11</span></li> <li><a href="#">5. 최효종, 다시 한 번 강용석 의원이 고소한다면?</a><span class="date">2011.08.11</span></li> </ul> <span id="bt5"> <a href="#" class="prev"><img src="http://mylko72.maru.net/jquerylab/images/ico/bul_arrow_up.gif" alt="Prev"></a> <a href="#" class="next"><img src="http://mylko72.maru.net/jquerylab/images/ico/bul_arrow_down.gif" alt="Next"></a> </span> </div> <div class="control fl"> <a href="#" class="play" title="재생">▷</a> <a href="#" class="stop" title="정지">▣</a> </div> <script type="text/javascript">fn_article3('notice5','bt5',true);</script> </div>
<style type="text/css"> .news {padding:0 0px 20px;} .news .open-event {height:16px; position:relative; border:1px solid #ccc; overflow:hidden;} .news .open-event ul{position:absolute; top:0px;} .news .open-event ul#notice1 {left:0;} .news .open-event ul#notice2 {right:20px;} .news .open-event ul li {height:20px;} .news .open-event ul li a {display:inline-block; width:310px;} .news .open-event ul li a:hover {color:#8f7614; text-decoration:underline;} .news .open-event ul li a strong {margin-right:10px;} .news .open-event ul li span.date {display:inline-block; width:60px;} .news .open-event .prev{position:absolute; top:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;} .news .open-event .next{position:absolute; bottom:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;} .news .control {float:left; margin:0px 0 0 10px; } .news .control a.stop {font-size:12px;} .news .control a.on {color:red; font-size:12px;} </style>
<script>
function fn_article3(containerID, buttonID, autoStart){ var $element = $('#'+containerID).find('.notice-list'); var $prev = $('#'+buttonID).find('.prev'); var $next = $('#'+buttonID).find('.next'); var $play = $('#'+containerID).find('.control > a.play'); var $stop = $('#'+containerID).find('.control > a.stop'); var autoPlay = autoStart; var auto = null; var speed = 2000; var timer = null; var move = $element.children().outerHeight(); var first = false; var lastChild; lastChild = $element.children().eq(-1).clone(true); lastChild.prependTo($element); $element.children().eq(-1).remove(); if($element.children().length==1){ $element.css('top','0px'); }else{ $element.css('top','-'+move+'px'); } if(autoPlay){ timer = setInterval(moveNextSlide, speed); $play.addClass('on').text('▶'); auto = true; }else{ $play.hide(); $stop.hide(); } $element.find('>li').bind({ 'mouseenter': function(){ if(auto){ clearInterval(timer); } }, 'mouseleave': function(){ if(auto){ timer = setInterval(moveNextSlide, speed); } } }); $play.bind({ 'click': function(e){ if(auto) return false; e.preventDefault(); timer = setInterval(moveNextSlide, speed); $(this).addClass('on').text('▶'); $stop.removeClass('on').text('▣'); auto = true; } }); $stop.bind({ 'click': function(e){ if(!auto) return false; e.preventDefault(); clearInterval(timer); $(this).addClass('on').text('■'); $play.removeClass('on').text('▷'); auto = false; } }); $prev.bind({ 'click': function(){ movePrevSlide(); return false; }, 'mouseenter': function(){ if(auto){ clearInterval(timer); } }, 'mouseleave': function(){ if(auto){ timer = setInterval(moveNextSlide, speed); } } }); $next.bind({ 'click': function(){ moveNextSlide(); return false; }, 'mouseenter': function(){ if(auto){ clearInterval(timer); } }, 'mouseleave': function(){ if(auto){ timer = setInterval(moveNextSlide, speed); } } }); function movePrevSlide(){ $element.each(function(idx){ if(!first){ $element.eq(idx).animate({'top': '0px'},'normal',function(){ lastChild = $(this).children().eq(-1).clone(true); lastChild.prependTo($element.eq(idx)); $(this).children().eq(-1).remove(); $(this).css('top','-'+move+'px'); }); first = true; return false; } $element.eq(idx).animate({'top': '0px'},'normal',function(){ lastChild = $(this).children().filter(':last-child').clone(true); lastChild.prependTo($element.eq(idx)); $(this).children().filter(':last-child').remove(); $(this).css('top','-'+move+'px'); }); }); } function moveNextSlide(){ $element.each(function(idx){ var firstChild = $element.children().filter(':first-child').clone(true); firstChild.appendTo($element.eq(idx)); $element.children().filter(':first-child').remove(); $element.css('top','0px'); $element.eq(idx).animate({'top':'-'+move+'px'},'normal'); }); } }
</script>
답변 2
보통 jquery 충돌은 js include 순서에 상관있습니다.
(plugin 설정)
<script src="a"/>
<script src="b"/>
를
<script src="b"/>
<script src="a"/>
와 같이 바꿔보시고..
정확한건 오류 로그를 봐야 알꺼 같긴합니다..
확인해보니
<script type="text/javascript">fn_article3('notice5','bt5',true);</script>
이 부분이 문제입니다.
위 영역을
<script type="text/javascript">
$(function(){
$(".control a").click(function(){
fn_article3('notice5','bt5',true);
});
});
</script>
로 변경해보세요
!-->
답변을 작성하시기 전에 로그인 해주세요.