簡體   English   中英

我想將圖像放入 <div> 代替圖像數組

[英]I want to put my images in a <div> instead of an image array

我想要做的是,而不是將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>

JSFiddle為懶惰的。

這是一個非常精簡的版本:

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM