我正在编写一个程序，它从一个 url 中获取一个 json 文件，然后它在一个 div 中显示所有信息。问题是我想做一个动画，一次只显示一个“新闻”。
在写fadeIn和fadeOut的代码之前，我看了所有的资料，我很不知道如何解决这个问题。
<head>
<style>#mypanel {
position: relative;
width: 100%;
height: 1080px;
}
#mypanel > div {
position: absolute;
}
div .title {
color: #fff;
font-size: 18pt;
font-weight: bold;
text-align: center;
}
div .description {
color: #fff;
font-size: 14pt;
}
</style>
</head>
<script>
$(document).ready(function(){
var text = [];
var previous = null;
var current = null;
setInterval(function() {
$.getJSON("mySite.com", function(news){
current = JSON.stringify(news);
if (previous && current && previous !== current) {
location.reload();
}
previous = current;
for (var i = 0, len = news.length; i < len; i++) {
if (news[i].imgFilePath == null && news[i].imgPosition == null){
text[i] = `
<div class="news">
<div></div>
<div class="title">${news[i].title}</div>
<div class="description">${news[i].description}</div>
</div>
`
}
else {
if(news[i].imgPosition == 't'){
text[i] = `
<div class="news">
<div><img class="top" src="img/${news[i].imgFilePath.split("/").pop()}"/></div>
<div class="title">${news[i].title}</div>
<div class="description">${news[i].description}</div>
</div>
`
}
else if(news[i].imgPosition == 'b'){
text[i] = `
<div class="news">
<div class="title">${news[i].title}</div>
<div class="description">${news[i].description}</div><br>
<div><img class="bottom" src="img/${news[i].imgFilePath.split("/").pop()}"/></div>
</div>
`
}
else if(news[i].imgPosition == 'l'){
text[i] = `
<div class="row">
<div class="column1">
<img class="left" src="img/${news[i].imgFilePath.split("/").pop()}"/>
</div>
<div class="column2">
<span class="title">${news[i].title}</span>
<span class="description">${news[i].description}</span>
</div>
</div>
`
}
else {
text[i] = `
<div class="row">
<div class="column3">
<span class="title">${news[i].title}</span>
<span class="description">${news[i].description}</span>
</div>
<div class="column4">
<img class="right" src="img/${news[i].imgFilePath.split("/").pop()}"/>
</div>
</div>
`
}
}
$("#mypanel").html(text.join(""));
$("#mypanel > div:gt(0)").hide();
setInterval(function() {
$('#mypanel > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#mypanel');
}, 2000);
}
});
}, 2000);
});
</script>
`
最佳答案
所以，情况是我有一个来自 url 的 json，这个 json 包含标题、描述、图像和图像的位置。
下面的代码采用该 json，将其转换为一个数组(称为新闻)，并将所有信息写入一个名为 mypanel 的 div 中，以淡入淡出效果逐条显示每条新闻。
<script>
$(document).ready(function(){
var text = [];
$.getJSON($url, function(news){
for (var i = 0, len = news.length; i < len; i++) {
if (news[i].imgFilePath == null && news[i].imgPosition == null){
text[i] = `
<div class="news">
<div class="title">${news[i].title}</div>
<div class="description">${news[i].description}</div>
</div>
`
}
else {
if(news[i].imgPosition == 't'){
text[i] = `
<div class="news">
<div><img class="top" src="img/${news[i].imgFilePath.split("/").pop()}"/></div>
<div class="title">${news[i].title}</div>
<div class="description">${news[i].description}</div>
</div>
`
}
else if(news[i].imgPosition == 'b'){
text[i] = `
<div class="news">
<div class="title">${news[i].title}</div>
<div class="description">${news[i].description}</div><br>
<div><img class="bottom" src="img/${news[i].imgFilePath.split("/").pop()}"/></div>
</div>
`
}
else if(news[i].imgPosition == 'l'){
text[i] = `
<div class="row">
<div class="column1">
<img class="left" src="img/${news[i].imgFilePath.split("/").pop()}"/>
</div>
<div class="column2">
<span class="title">${news[i].title}</span>
<span class="description">${news[i].description}</span>
</div>
</div>
`
}
else {
text[i] = `
<div class="row">
<div class="column3">
<span class="title">${news[i].title}</span>
<span class="description">${news[i].description}</span>
</div>
<div class="column4">
<img class="right" src="img/${news[i].imgFilePath.split("/").pop()}"/>
</div>
</div>
`
}
}
$("#mypanel").html(text.join(""));
$("#mypanel > div:gt(0)").hide();
setInterval(function() {
$('#mypanel > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#mypanel');
}, 3000);
}
});
});
</script>
<div id="mypanel"></div>
<script>
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
window.onload = timedRefresh(900000);
</script>
关于javascript - 使用 json 文件在 javascript 中显示幻灯片的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55478219/