나는이 코드 작업을하기 위해 일주일 내내 노력했지만 성공하지는 못했습니다.ASPX에서 JQUERY를 사용하면 작동하지 않습니다.
기본적으로 다음 코드는 HTML/CSS/JS/JQUERY (https://jsfiddle.net/epugcycg/5/)에서 완벽하게 작동하지만 작동하지 않는 경우 코드를 내 ASPX 프로젝트에 복사하면 정상적으로 작동합니다.
HTML
<body>
<div id="big-box">
<p id="title"></p>
<div class="box">
<div>
<img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id ="pic1">
</div>
<div>
<p id="c1"></p>
</div>
</div>
<div class="box">
<div>
<img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id ="pic2">
</div>
<div>
<p id="c2"></p>
</div>
</div>
<div class="box">
<div>
<img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id ="pic3">
</div>
<div>
<p id="c3"></p>
</div>
</div>
<div class="box">
<div>
<img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id ="pic4">
</div>
<div>
<p id="c4"></p>
</div>
</div>
</div>
</body>
CSS
.box {
width: 400px;
height: 110px;
background-color: grey;
margin: 0 auto;
}
div .center-img {
padding-top: 5px;
padding-left: 5px;
float: left;
}
div div p {
text-align: center;
line-height: 110px;
}
#big-box p {
text-align: center;
}
JS
function nextMsg(i) {
if (messages.length == i) {
i = 0;
}
$('#c1').html(c1[i]).fadeIn(500).delay(1000).fadeOut(500);
$('#c2').html(c2[i]).fadeIn(500).delay(1000).fadeOut(500);
$('#c3').html(c3[i]).fadeIn(500).delay(1000).fadeOut(500);
$('#c4').html(c4[i]).fadeIn(500).delay(1000).fadeOut(500);
$("#pic1").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
$("#pic2").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
$("#pic3").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
$("#pic4").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
$('#title').html(messages[i]).fadeIn(500).delay(1000).fadeOut(500, function() {
nextMsg(i + 1);
});
};
var messages = [
"MEDELLIN",
"BOGOTA",
"CALI",
"CARTAGENA",
"BARRANQUILLA"
];
var c1 = [
"JULIANA 1",
"JULIANA 2",
"JULIANA 3",
"JULIANA 4",
"JULIANA 5",
];
var c2 = [
"PEDRO 1",
"PEDRO 2",
"PEDRO 3",
"PEDRO 4",
"PEDRO 5",
];
var c3 = [
"PEDRITO 1",
"PEDRITO 2",
"PEDRITO 3",
"PEDRITO 4",
"PEDRITO 5",
];
var c4 = [
"KOTICO 1",
"KOTICO 2",
"KOTICO 3",
"KOTICO 4",
"KOTICO 5",
];
var img = [
"http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
"https://www.landinst.com/images/placeholder-100x100.png",
"http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
"https://www.landinst.com/images/placeholder-100x100.png",
"http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
]
$('#title').hide();
$('#c1').hide();
$('#c2').hide();
$('#c3').hide();
$('#c4').hide();
$('#pic1').hide();
$('#pic2').hide();
$('#pic3').hide();
$('#pic4').hide();
nextMsg(0);
내가 ASPX 프로젝트에 오류가 표시되지 않습니다,하지만 작동하지 않습니다. 텍스트/정보는 순환하지 않으며 단지 정적 인 웹 사이트입니다. 표준 HTML 프로젝트가 완벽하게 작동하는 동안
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
.box {
width: 400px;
height: 110px;
background-color: grey;
margin: 0 auto;
}
div .center-img {
padding-top: 5px;
padding-left: 5px;
float: left;
}
div div p {
text-align: center;
line-height: 110px;
}
#big-box p {
text-align: center;
}
</style>
<script type='text/javascript'>
function nextMsg(i) {
if (messages.length == i) {
i = 0;
}
$('#c1').html(c1[i]).fadeIn(500).delay(1000).fadeOut(500);
$('#c2').html(c2[i]).fadeIn(500).delay(1000).fadeOut(500);
$('#c3').html(c3[i]).fadeIn(500).delay(1000).fadeOut(500);
$('#c4').html(c4[i]).fadeIn(500).delay(1000).fadeOut(500);
$("#pic1").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
$("#pic2").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
$("#pic3").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
$("#pic4").attr("src", img[i]).fadeIn(500).delay(1000).fadeOut(500);
$('#title').html(messages[i]).fadeIn(500).delay(1000).fadeOut(500, function() {
nextMsg(i + 1);
});
};
var messages = [
"MEDELLIN",
"BOGOTA",
"CALI",
"CARTAGENA",
"BARRANQUILLA"
];
var c1 = [
"JULIANA 1",
"JULIANA 2",
"JULIANA 3",
"JULIANA 4",
"JULIANA 5",
];
var c2 = [
"PEDRO 1",
"PEDRO 2",
"PEDRO 3",
"PEDRO 4",
"PEDRO 5",
];
var c3 = [
"PEDRITO 1",
"PEDRITO 2",
"PEDRITO 3",
"PEDRITO 4",
"PEDRITO 5",
];
var c4 = [
"KOTICO 1",
"KOTICO 2",
"KOTICO 3",
"KOTICO 4",
"KOTICO 5",
];
var img = [
"http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
"https://www.landinst.com/images/placeholder-100x100.png",
"http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
"https://www.landinst.com/images/placeholder-100x100.png",
"http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png",
]
$('#title').hide();
$('#c1').hide();
$('#c2').hide();
$('#c3').hide();
$('#c4').hide();
$('#pic1').hide();
$('#pic2').hide();
$('#pic3').hide();
$('#pic4').hide();
nextMsg(0);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="big-box">
<p id="title" runat="server"></p>
<div class="box">
<div>
<img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id="pic1">
</div>
<div>
<p id="c1" runat="server"></p>
</div>
</div>
<div class="box">
<div>
<img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id="pic2">
</div>
<div>
<p id="c2" runat="server"></p>
</div>
</div>
<div class="box">
<div>
<img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id="pic3">
</div>
<div>
<p id="c3" runat="server"></p>
</div>
</div>
<div class="box">
<div>
<img src="http://geniussys.com/img/placeholder/blogpost-placeholder-100x100.png" class="center-img" id="pic4">
</div>
<div>
<p id="c4" runat="server"></p>
</div>
</div>
</div>
</form>
</body>
</html>
(https://jsfiddle.net/kn1tffhh/는) 왜 ID를 가진 요소는 ASPX 프로젝트에 수정되지 않는 것입니까? 귀하의 도움에 감사드립니다) :
두 번째 예에서는 자바 스크립트 코드를 추가하지 않았습니다. 그것이 작동하지 않는 이유입니다. 두 번째 예제 링크에 자바 스크립트 코드를 추가했는데 작동 중입니다. –
페이지의 소스가 보이면 ASPX 페이지의 ID가 수정되고 있음을 알 수 있습니다. ClientIdMode (https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientidmode.aspx)에이 파일이 있어야합니다. –