我想将我的图像放在<div>而不是图像数组</div>中

时间:2014-05-10 20:38:25

标签: javascript html css

我希望能够做的是,而不是JavaScript中的图像在图像数组中。我希望他们在div fadeshow1里面,但我不知道怎么做。

标记:

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

带图像数组的代码:

<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>

1 个答案:

答案 0 :(得分:0)

JSFiddle for the lazy.

这是一个非常愚蠢的版本:

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]);
});

用法:

<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>

输出:

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