[英]Add atrributes from image to javascript array and display
我需要将这个div中图像的属性添加到JS数组中,并使用以下图像运行Supersized:
<div id="dgaslides">
<img src="img/temp/topimg01.jpg" title="Image 1">
<img src="img/temp/topimg02.jpg" title="Image 2">
<img src="img/temp/topimg03.jpg" title="Image 3">
</div>
我的JS:
jQuery(function($){
var img_length = $('#dgaslides img').length-1;
var dgaslides = [];
$('#dgaslides img').each( function(i){
var src = $(this).attr('src');
var title = $(this).attr('title');
dgaslides.push("{image : '" + src + "', title : '" + title + "'}");
if(img_length == i){
$.supersized({
// Functionality
slide_interval : 3000, // Length between transitions
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
transition_speed : 700, // Speed of transition
horizontal_center : 1, // Centers image horizontally. When turned off, the images resize/display from the left of the page.
// Components
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
slides : dgaslides
});
}
}); });
它确实可以正常工作,因为我在输出中获得了3张图像,但是链接(src)为“未定义”,标题也不存在吗?
对其进行硬编码的正确方法是:
var dgaslides = [ // Slideshow Images
{image : 'img/temp/topimg01.jpg', title : 'Reception'},
{image : 'img/temp/topimg02.jpg', title : 'Reception 2 og noget mere tekst her'},
{image : 'img/temp/topimg03.jpg', title : 'Reception 3'}
];
谁能帮我弄清楚我在做什么错?
我认为您需要传递对象数组而不是字符串数组。
dgaslides.push({image : src, title : title });
您正在将字符串保存到数组而不是对象。
这是一个JSFiddle,其代码的修改版本(不带超大功能)可以按预期工作: http : //jsfiddle.net/SBuXF/
主要更改: dgaslides.push({image : src, title : title});
我将生成的数组输出到控制台,然后是您的硬编码数组-它们是相同的。
编辑:您的硬编码标题与HTML不匹配,因此两个数组的内容略有不同,但是它们的格式都正确。 正确的小提琴在这里: http : //jsfiddle.net/SBuXF/1/
您可以使用jQuery的map方法来简化任务。 以下是代码。
jQuery(function ($) {
var dgaslides = $('#dgaslides img').map(function () {
return {
image: $(this).attr('src'),
title: $(this).attr('title')
};
});
$.supersized({
slide_interval: 3000,
transition: 1,
transition_speed: 700,
horizontal_center: 1,
slide_links: 'blank',
slides: dgaslides
});
});
希望这可以帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.