超大幻灯片从列表而不是 javascript 加载图像答案

【问题标题】：Supersized Slideshow loading images from list instead of javascript超大幻灯片从列表而不是 javascript 加载图像
【发布时间】：2014-04-29 15:05:40
【问题描述】：

我正在尝试修改超大幻灯片插件以从列表（在 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>

谁能帮帮我？ :)

【问题讨论】：

标签： javascript jquery html seo supersized

【解决方案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，检查小提琴页面的“外部资源”选项卡。
获得相同结果的最短方法可能是Fiddle
在这种情况下，我没有创建数组，而是直接在 obj 中添加图像路径

【讨论】：