제이쿼리중복질문합니다
본문
제이쿼리 두개사용중인데 2번째제이쿼리 버튼 누르면 첫번째 버튼이먹힙니다
도와주세요 ㅠㅠ 초보입니다..
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
<!doctype>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>TN Plastic Sugery</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../../russia/example/vendors/bootstrap.min.css">
<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" type="text/css">
<style>
body{
margin-top: 55px;
}
section{
position: relative;
min-height: 600px;
}
.wrapper{
width: 1078px;
margin: 0 auto;
}
#content { margin: 150px auto; max-width: 760px; text-align: center; }
#carousel_container {
width: 95%;
height: 300px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
#carousel {
width: 600px;
height: 300px;
margin: 0;
padding: 0;
position: absolute;
list-style-type: none;
}
#carousel li {
position: absolute;
margin: 0;
padding: 0;
float: left;
}
#carousel li img {
width: 100%;
height: 100%;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
#c1 {
width: 200px;
height: 150px;
left: 200px;
top: 130px;
z-index: 5;
}
#c2 {
width: 150px;
height: 113px;
left: 350px;
top: 100px;
z-index: 4;
}
#c3 {
width: 100px;
height: 75px;
left: 450px;
top: 50px;
z-index: 3;
}
#c4 {
width: 80px;
height: 60px;
left: 400px;
top: 20px;
z-index: 2;
}
#c5 {
width: 70px;
height: 53px;
left: 320px;
top: 10px;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 1;
}
#c6 {
width: 70px;
height: 53px;
left: 210px;
top: 10px;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 1;
}
#c7 {
width: 80px;
height: 60px;
left: 120px;
top: 20px;
z-index: 2;
}
#c8 {
width: 100px;
height: 75px;
left: 50px;
top: 50px;
z-index: 3;
}
#c9 {
width: 150px;
height: 113px;
left: 100px;
top: 100px;
z-index: 4;
}
#move_mark {
width: 95%;
max-width: 500px;
margin: 0 auto;
position: relative;
bottom: 0;
}
#move_mark a {
color: #666;
font-size: 20px;
font-weight: bold;
text-decoration: none;
}
#move_mark a.active, #move_mark a:hover {
color: #333;
}
#move_back {
margin: 0 10px;
position: absolute;
bottom: 0;
left: 0;
}
#move_next {
margin: 0 10px;
position: absolute;
bottom: 0;
right: 0;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="jquery.acarousel.min.js"></script>
<script>
$(function () {
var acarousel = $("#carousel").acarousel();
changeActive();
$("#carousel li a").click(function() {
if (acarousel.isAnim()) return false;
var move = acarousel.moveByElem($(this).parent());
if (move == 0) {
alert("Move 0");
} else {
changeActive(move);
}
return false;
});
$("#move_back").click(function () {
if (acarousel.isAnim()) return false;
var move = acarousel.move(1);
changeActive(move);
return false;
});
$("#move_next").click(function () {
if (acarousel.isAnim()) return false;
var move = acarousel.move(-1);
changeActive(move);
return false;
});
$(".move").click(function () {
if (acarousel.isAnim()) return false;
var index = $(".move").index(this);
var move = acarousel.moveByIndex(index);
changeActive(move);
return false;
});
function changeActive(move) {
var index = acarousel.getPos(move).index;
$(".move").removeClass("active").eq(index).addClass("active");
}
$(window).resize(function () {
var parent = $("#carousel_container");
var self = $("#carousel");
self.css({
left: parent.width() / 2 - self.width() / 2
, top: parent.height() / 2 - self.height() / 2
});
}).trigger("resize");
});
</script>
</head>
<body class='affix'>
<header>
<div class="blog-masthead">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<p> </p>
<p><a class="navbar-brand" href="#">TN Plastic Sugery</a>
</p>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" data-section href="#!section-1">Kyong Seok. Tak</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-2">Eye Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-3">Fat Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-4">Nose Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-5">Breast Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-6">Lifting Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-7">Body Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-8">Real Hand Made</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-9">TN Introduce</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="wrapper">
<section id="section-1">
<div class="container"><img src="images/tl_page_01.jpg" width="1078" height="814"></div>
</section>
<section id="section-2">
<div class="container"><img src="images/tl_page_02_01.jpg" width="1078" height="1868"></div>
</section>
<section id="section-3">
<div class="container"> <div class="container"><img src="images/tl_page_02_02.jpg" width="1078" height="1924"></div>
</div>
</section>
<section id="section-4">
<div class="container"><img src="images/tl_page_03.jpg" width="1078" height="4084"></div>
</section>
<section id="section-5">
<div class="container"><img src="images/tl_page_04.jpg" width="1078" height="2748"></div>
</section>
<section id="section-6">
<div class="container"><img src="images/tl_page_05.jpg" width="1078" height="1916"></div>
</section>
<section id="section-7">
<div class="container"><img src="images/tl_page_06.jpg" width="1078" height="2584"></div>
</section>
<section id="section-8">
<div class="container"><img src="images/tl_page_07ss_01.jpg" width="1078" height="11244"></div>
<div class="container"><img src="images/tl_page_07ss_02.jpg" width="1078" height="6299"></div>
</section>
<div id="content">
<h1>jQuery Acarousel.js Cover Flow Style Carousel Example</h1>
<p>Acarousel.js is a tiny (3kb minified) jQuery plugin to create a cover flow style image carousel for the web.</p>
<p><a href="demo2.html">Check Out Advanced Demo</a></p>
<div id="carousel_container">
<ul id="carousel">
<li id="c1"><a href="#"><img src="img1.jpg"></a></li>
<li id="c2"><a href="#"><img src="img2.jpg"></a></li>
<li id="c3"><a href="#"><img src="img3.jpg"></a></li>
<li id="c4"><a href="#"><img src="img4.jpg"></a></li>
<li id="c5"><a href="#"><img src="img5.jpg"></a></li>
<li id="c6"><a href="#"><img src="img6.jpg"></a></li>
<li id="c7"><a href="#"><img src="img7.jpg"></a></li>
<li id="c8"><a href="#"><img src="img8.jpg"></a></li>
<li id="c9"><a href="#"><img src="img9.jpg"></a></li>
</ul>
</div>
<div id="move_mark">
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<div id="move_back"><a href="#">←</a></div>
<div id="move_next"><a href="#">→</a></div>
</div>
</div>
<section id="section-9">
<div class="container"><img src="images/tl_page_08.jpg" width="1078" height="2658"></div>
</section>
</div>
<footer>
<div class="blog-masthead">
<div class="container">
<nav class="navbar navbar-expand-md navbar-dark fixed-bottom bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse2" aria-controls="navbarCollapse2" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse2">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" data-section href="#!section-1">Kyong Seok. Tak
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-2">Eye Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-3">Fat Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-4">Nose Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-5">Breast Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-6">Lifting Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-7">Body Before&After</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-8">Real Hand Made</a>
</li>
<li class="nav-item">
<a class="nav-link" data-section href="#!section-9">TN Introduce</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</footer>
<script src="/russia/example/vendors/jquery.min.js"></script>
<script src="/russia/example/vendors/popper.min.js"></script>
<script src="/russia/example/vendors/bootstrap.min.js"></script>
<script src='/russia/dist/scroll2Section.js'></script>
<script>
var navFooter = $("footer nav a[data-section]");
$("section").scroll2Section({menu:'header nav',offsetTop:56}).on('update',function(event,element){
var href = $(element).attr('href');
$(navFooter).parent().removeClass('active');
$(navFooter).filter("[href='" + href + "']").parent().addClass('active');
});
</script>
<script>
try {
fetch(new Request("https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js", { method: 'HEAD', mode: 'no-cors' })).then(function(response) {
return true;
}).catch(function(e) {
var carbonScript = document.createElement("script");
carbonScript.src = "//cdn.carbonads.com/carbon.js?serve=CK7DKKQU&placement=wwwjqueryscriptnet";
carbonScript.id = "_carbonads_js";
document.getElementById("carbon-block").appendChild(carbonScript);
});
} catch (error) {
console.log(error);
}
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
답변 2
back이랑 next부분인가요?
불필요한 소스들 정리해서 다시 질문해주시는게 좋을거같네요
<script>
$(function () {
var acarousel = $("#carousel").acarousel();
changeActive();
$("#carousel li a").click(function() {
if (acarousel.isAnim()) return false;
var move = acarousel.moveByElem($(this).parent());
if (move == 0) {
alert("Move 0");
} else {
changeActive(move);
}
return false;
});
$("#move_back").click(function () {
if (acarousel.isAnim()) return false;
var move = acarousel.move(1);
changeActive(move);
return false;
});
$("#move_next").click(function () {
if (acarousel.isAnim()) return false;
var move = acarousel.move(-1);
changeActive(move);
return false;
});
$(".move").click(function () {
if (acarousel.isAnim()) return false;
var index = $(".move").index(this);
var move = acarousel.moveByIndex(index);
changeActive(move);
return false;
});
function changeActive(move) {
var index = acarousel.getPos(move).index;
$(".move").removeClass("active").eq(index).addClass("active");
}
$(window).resize(function () {
var parent = $("#carousel_container");
var self = $("#carousel");
self.css({
left: parent.width() / 2 - self.width() / 2
, top: parent.height() / 2 - self.height() / 2
});
}).trigger("resize");
});
</script>
<div id="content">
<h1>jQuery Acarousel.js Cover Flow Style Carousel Example</h1>
<p>Acarousel.js is a tiny (3kb minified) jQuery plugin to create a cover flow style image carousel for the web.</p>
<p><a href="demo2.html">Check Out Advanced Demo</a></p>
<div id="carousel_container">
<ul id="carousel">
<li id="c1"><a href="#"><img src="img1.jpg"></a></li>
<li id="c2"><a href="#"><img src="img2.jpg"></a></li>
<li id="c3"><a href="#"><img src="img3.jpg"></a></li>
<li id="c4"><a href="#"><img src="img4.jpg"></a></li>
<li id="c5"><a href="#"><img src="img5.jpg"></a></li>
<li id="c6"><a href="#"><img src="img6.jpg"></a></li>
<li id="c7"><a href="#"><img src="img7.jpg"></a></li>
<li id="c8"><a href="#"><img src="img8.jpg"></a></li>
<li id="c9"><a href="#"><img src="img9.jpg"></a></li>
</ul>
</div>
<div id="move_mark">
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<div id="move_back"><a href="#">←</a></div>
<div id="move_next"><a href="#">→</a></div>
</div>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
----------------------------------------------------------------------------------
이부분입니다
<div id="move_mark">
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<a class="move" href="#">●</a>
<div id="move_back"><a href="#">←</a></div>
<div id="move_next"><a href="#">→</a></div>
</div>
좌우 동그라미누르면 자꾸 전제이쿼리인 위로가기가됩니다 ㅠㅠ
일단 개발자도구 들어가서 스크립트에러나는게 있는지 확인해보세요
