超大幻燈片從列表而不是從JavaScript加載圖像

Question

我正在嘗試修改超大幻燈片插件，以從列表（在html源中）而不是從javascript中獲取圖像。 此技巧的目的是讓Google指明圖片。

這是原始代碼

<script type="text/javascript">
        jQuery(function($){
            $.supersized({
                slide_interval          :   3000,
                transition              :   1,
                transition_speed        :   700                     
                slide_links             :   'blank'
                slides                  :   [

{image : 'image.jpg', title : 'title', thumb : 'image.jpg', url : ''},
{image : 'image.jpg', title : 'title', thumb : 'image.jpg', url : ''},
{image : 'image.jpg', title : 'title', thumb : 'image.jpg', url : ''},
{image : 'image.jpg', title : 'title', thumb : 'image.jpg', url : ''},
{image : 'image.jpg', title : 'title', thumb : 'image.jpg', url : ''},
{image : 'image.jpg', title : 'title', thumb : 'image.jpg', url : ''},
{image : 'image.jpg', title : 'title', thumb : 'image.jpg', url : ''}

                                            ]
            });
        });

</script>

我想使用這樣的代碼

<ul id="supersized">
<li><img alt="text" title="text" src="image.jpg" /></li>
<li><img alt="text" title="text" src="image.jpg" /></li>
<li><img alt="text" title="text" src="image.jpg" /></li>
<li><img alt="text" title="text" src="image.jpg" /></li>
<li><img alt="text" title="text" src="image.jpg" /></li>
<li><img alt="text" title="text" src="image.jpg" /></li>
<li><img alt="text" title="text" src="image.jpg" /></li>
</ul>


<script type="text/javascript">
        jQuery(function($){
            $.supersized({
                    <code>
</script>

有誰能夠幫助我 ？ :)

Answer 1

我找到了解決您問題的方法
這是FIDDLE
這是jQuery代碼

<script type="text/javascript">
    jQuery(function($){
        var obj={
            slide_interval          :   3000,       
            transition              :   3,          
            transition_speed        :   700,        
            slide_links             :   'blank',    
            slides                  :   []          
            }

        var arrImg=[]   
        for(i=0;i<$('#supers li').length;i++){
            var srcImg=$('#supers li:eq('+i+')').find('img').attr('src')
            arrImg.push(srcImg)
            }
        for(x=0;x<arrImg.length;x++){
            obj.slides[x]={image:arrImg[x]}

            }
        $.supersized({
            slide_interval          :   obj.slide_interval,     
            transition              :   obj.transition,             
            transition_speed        :   obj.transition_speed,       
            slide_links             :   obj.slide_links,    
            slides                  :   obj.slides

        });

    });

</script>

首先，我將圖像的所有src屬性插入數組
使用此數組，我在obj.slides數組（腳本的第一個對象）中創建屬性
然后，我將此obj對象用於超大插件的設置參數。
為此，我使用了在插件的下載包中找到的腳本和CSS，請檢查小提琴頁面的“外部資源”選項卡。
獲得相同結果的最短途徑是小提琴
而不是在這種情況下創建數組，我直接在obj中添加圖像路徑