有没有人知道如何根据当文章图片位于Waterwheel Image Carousel插件中心时的对象，将＃article-title和＃article-author的文本更改为动态？现在它只显示最后一个对象的信息。如果我需要澄清或更好地理解我的问题，请告诉我。此外，非常感谢有关如何更好地编写和构造代码的任何提示。在此先感谢！
$(document).ready(function () {
let articles = [{
image: "https://source.unsplash.com/400x500/?Flowers",
title: "Article 1",
author: "Edwards Elric"
},
{
image: "https://source.unsplash.com/400x500/?Space",
title: "Article 2",
author: "James Pal"
},
{
image: "https://source.unsplash.com/400x500/?People",
title: "Article 3",
author: "Keven Dorant"
},
{
image: "https://source.unsplash.com/400x500/?Cars",
title: "Article 4",
author: "Peter Scoot"
},
{
image: "https://source.unsplash.com/400x500/?Girls",
title: "Article 5",
author: "Alex Blue"
}
]
articles.forEach(function (article) {
// console.log(article.author)
let waterwheel = document.getElementById('waterwheel-carousel');
let imageHolder = document.createElement("div");
imageHolder.className = 'char'
let image = document.createElement('img')
image.src = article.image;
imageHolder.appendChild(image)
waterwheel.appendChild(imageHolder)
})
var carousel = $("#waterwheel-carousel").waterwheelCarousel({
horizon: 200,
horizonOffset: 0,
horizonOffsetMultiplier: .7,
activeClassName: "active",
separation: 360,
flankingItems: 1,
keyboardNav: true,
edgeFadeEnabled: true,
// autoPlay: 1300,
animationEasing: "linear",
clickedCenter: function ($clickedItem) {
// $clickedItem is a jQuery wrapped object describing the image that was clicked.
$(".text").css("display", "block")
},
movedToCenter: function ($newCenterItem) {
$(".text").css("display", "block")
articles.forEach(function (article) {
$('#article-title').text(article.title)
$('#article-author').text(article.author)
})
}
});
$('#prev').bind('click', function () {
carousel.prev();
return false
});
$('#next').bind('click', function () {
carousel.next();
return false;
});
});.img-slider {
margin-top: 50px;
}
#waterwheel-carousel {
clear: both;
width: 1000px;
height: 550px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#waterwheel-carousel img {
cursor: pointer;
visibility: hidden;
}
.text {
background: #f5f5f5;
padding: 10px;
display: none;
position: relative;
top: -122.5px;
text-align: center;
width: 25.2%;
margin: auto;
}
.text a {
display: block;
color: #000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="img-slider">
<div id="waterwheel-carousel"></div>
</div>
<a href="#" id="prev">Prev</a> |
<a href="#" id="next">Next</a>
</div>
<div class="text">
<!-- <a href="#" class="article-category">Innovation</a> -->
<a href="#" id="article-title">The Future as we know it</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam officia natus harum voluptatem iste?</p>
<a href="#" id="article-author">By Fritz Kyle</a>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://bkosborne.com/sites/all/themes/bootstrap_brian/js/jquery.waterwheelCarousel.min.js"></script>
<script src="main.js"></script>
</body>
</html>
答案 0 :(得分：0)
您可以获取当前图像的来源并找到包含该图像的文章。
然后，您只需相应地更新#article-title和#article-author。
您更新的movedToCenter功能：
movedToCenter: function ($newCenterItem) {
$(".text").css("display", "block")
// Get current image source
const currentImageSource = $newCenterItem.attr('src');
// Find article with a source of a current image
const currentItem = articles.find(article => article.image === currentImageSource);
// Set article title and author to a value of a curren item
$('#article-title').text(currentItem.title)
$('#article-author').text(currentItem.author)
}
整个更新的片段：
$(document).ready(function () {
let articles = [{
image: "https://source.unsplash.com/400x500/?Flowers",
title: "Article 1",
author: "Edwards Elric"
},
{
image: "https://source.unsplash.com/400x500/?Space",
title: "Article 2",
author: "James Pal"
},
{
image: "https://source.unsplash.com/400x500/?People",
title: "Article 3",
author: "Keven Dorant"
},
{
image: "https://source.unsplash.com/400x500/?Cars",
title: "Article 4",
author: "Peter Scoot"
},
{
image: "https://source.unsplash.com/400x500/?Girls",
title: "Article 5",
author: "Alex Blue"
}
]
articles.forEach(function (article) {
// console.log(article.author)
let waterwheel = document.getElementById('waterwheel-carousel');
let char = document.createElement("div");
char.className = 'char'
let image = document.createElement('img')
image.src = article.image;
char.appendChild(image)
waterwheel.appendChild(char)
})
var carousel = $("#waterwheel-carousel").waterwheelCarousel({
horizon: 200,
horizonOffset: 0,
horizonOffsetMultiplier: .7,
activeClassName: "active",
separation: 360,
flankingItems: 1,
keyboardNav: true,
edgeFadeEnabled: true,
// autoPlay: 1300,
animationEasing: "linear",
clickedCenter: function ($clickedItem) {
// $clickedItem is a jQuery wrapped object describing the image that was clicked.
$(".text").css("display", "block")
},
movedToCenter: function ($newCenterItem) {
$(".text").css("display", "block")
// Get current image source
const currentImageSource = $newCenterItem.attr('src');
// Find article with a source of a current image
const currentItem = articles.find(article => article.image === currentImageSource);
// Set article title and author to a value of a curren item
$('#article-title').text(currentItem.title)
$('#article-author').text(currentItem.author)
}
});
$('#prev').bind('click', function () {
carousel.prev();
return false
});
$('#next').bind('click', function () {
carousel.next();
return false;
});
});.img-slider {
margin-top: 50px;
}
#waterwheel-carousel {
clear: both;
width: 1000px;
height: 550px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
#waterwheel-carousel img {
cursor: pointer;
visibility: hidden;
}
.text {
background: #f5f5f5;
padding: 10px;
display: none;
position: relative;
top: -122.5px;
text-align: center;
width: 25.2%;
margin: auto;
}
.text a {
display: block;
color: #000;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="img-slider">
<div id="waterwheel-carousel"></div>
</div>
<a href="#" id="prev">Prev</a> |
<a href="#" id="next">Next</a>
</div>
<div class="text">
<!-- <a href="#" class="article-category">Innovation</a> -->
<a href="#" id="article-title">The Future as we know it</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam officia natus harum voluptatem iste?</p>
<a href="#" id="article-author">By Fritz Kyle</a>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://bkosborne.com/sites/all/themes/bootstrap_brian/js/jquery.waterwheelCarousel.min.js"></script>
<script src="main.js"></script>
</body>
</html>