제이쿼리 충돌?

제이쿼리 충돌?

QA

제이쿼리 충돌?

본문

단독으로 썼을때는 구동이 되는데
메인페이지에 출력하려고 하니 구동이 안되는데여..
혹시 메인에 다른 슬라이드와  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>

로 변경해보세요
답변을 작성하시기 전에 로그인 해주세요.
전체 1,178
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT