我想将图像放入 <div> 代替图像数组

Question

What I want to be able to do is, instead of the images for the JavaScript to be within an image array. 我想要做的是，而不是将JavaScript包含在图像数组中的图像。 I would like them to be inside of the div fadeshow1 , but I don't know how to do it. 我希望它们位于div fadeshow1内部，但我不知道该怎么做。

Markup: 标记：

<div id="fadeshow1">
<img src="image1">
<img src="image2">
<img src="image3"></div>

Code with image array: 带有图像数组的代码：

<html>
    <head>
<script type="text/javascript">

var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
        ["http://www.dynamicdrive.com/dynamicindex4/pool.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
        ["http://www.dynamicdrive.com/dynamicindex4/cave.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
        ["http://www.dynamicdrive.com/dynamicindex4/fruits.jpg"],
        ["http://www.dynamicdrive.com/dynamicindex4/dog.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    ],
    displaymode: {type:'auto', pause:2000, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
})

</script>
    </head>
    <body>

    <div id="fadeshow1"></div>

    </body>
</html>

Answer 1

JSFiddle for the lazy. JSFiddle为懒惰的。

Here's an extremely dumbed-down version: 这是一个非常精简的版本：

var myImages = [];

$("#fadeshow1 img").each(function(index, element){
    var $element      = $(element), 
        altText       = $element.attr('alt'),
        $parentLinkEl = $element.parent('a'),
        linkUrl,
        linkTarget;

    if ($parentLinkEl.length)
    {
        linkUrl    = $parentLinkEl.attr('href');
        linkTarget = $parentLinkEl.attr('target');
    }

    if (linkUrl === void 0)
    {
        linkUrl = '';
    }

    if (linkTarget === void 0)
    {
        linkTarget = '';
    }

    if (altText === void 0) {
        altText = '';
    }
    myImages.push([$element.attr('src'), linkUrl, linkTarget, altText]);
});

Usage: 用法：

<div id="fadeshow1">
    <img src="image1" alt="foo"/>
    <a href="http://google.de"><img src="image2"/></a>
    <a href="http://wikipedia.org" target="_top"><img src="image3" alt="bar" /></a>
</div>

Output: 输出：

[
    ["image1", ""                     ,""     , "foo"],
    ["image2", "http://google.de"     ,""     , ""],
    ["image3", "http://wikipedia.org" ,"_top" , "bar"]
]

我想将图像放入 <div> 代替图像数组

问题描述

1 个解决方案

解决方案1
0 2014-05-10 20:46:06

我想将图像放入 <div> 代替图像数组

问题描述

1 个解决方案

解决方案1 0 2014-05-10 20:46:06

解决方案1
0 2014-05-10 20:46:06