问题：

通过一个数组来填充nivoSlider的变量，每个幻灯片都有自己的设置

郏正信

2023-03-14

这是我第三次尝试用查询返回的数据对nivoSlider设置的填充提出不同的问题。感谢所有试图回答我前面问题的人。在这里，我试图提供一个更好的解释，说明我正在努力做什么。

这就是我正在努力做的。我在表中有两个记录，它们包含图像名称、效果、切片、boxCols、boxRows、animSpeed和pausetime。

运行脚本，该脚本返回数据，并使用nivoslider为每个记录显示图像。每张幻灯片有不同的显示要求，例如：

幻灯片No1:
效果-SliceUp
切片-30
框列-16
框列-8
动画速度-8000
暂停时间-12000

幻灯片No2:

效果-框形图
切片-10
框形图-12
框形图-8
动画速度-8000
暂停时间-6000

nivoSlider脚本如下所示：

$(window).load(function() {
  $('#slider').nivoSlider({
    effect: '<?php echo $row['Effect'];?>',
    slices:  '<?php echo $rowe['Slices'];?>',
    boxCols:'<?php echo $row['Cols'];?>',
    boxRows:  '<?php echo $row['Rows'];?>',
    animSpeed:'<?php echo $row['AnimSpeed'];?>',
    pauseTime: '<?php echo $row['TimeLapse'];?>',
    startSlide: 0,
    directionNav: false,
    controlNav: false,
    controlNavThumbs: false,
    pauseOnHover: false,
    manualAdvance: false,
    randomStart: false,
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){},
    lastSlide: function(){},
    afterLoad: function(){}
  });
});

我有一个PHP循环来显示每个图像一个接着一个。

<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
   <?php while($row_Signage = mysqli_fetch_assoc($result)) {?>
    <script type="text/javascript">
    $(window).load(function() {
      $('#slider').nivoSlider({
        effect: '<?php echo $row['Effect'];?>',
        slices:  '<?php echo $row['Slices'];?>',
        boxCols:'<?php echo $row['Cols'];?>',
        boxRows:  '<?php echo $row['Rows'];?>',
        animSpeed:'<?php echo $row['AnimSpeed'];?>',
        pauseTime: '<?php echo $row['TimeLapse'];?>',
        startSlide: 0,
        directionNav: false,
        controlNav: false,
        controlNavThumbs: false,
        pauseOnHover: false,
        manualAdvance: false,
        randomStart: false,
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){},
        lastSlide: function(){},
        afterLoad: function(){}
      });
    });
    </script>
    <?php
      echo '<img src="/'.$ImagePath .''.$row['PromotionImage'].'"/> ';
    ?>
    <?php } ?>
  </div>
</div>

对于while循环中的nivoSlider脚本，我希望代码获得第一条记录，并使用nivoSlider脚本中的变量显示它。它确实显示了图像，但也显示了一个空白页，错误为：example.com/apps/signage/exbhx/ds2/undefined。有人建议我需要将一部分代码移到while循环之外，因此我尝试了以下操作：

<?php while($row = mysqli_fetch_assoc($result)) {
  $effect = $row['Effect'];
  $slices = $row['Slices'];
  $boxCols = $row['Cols'];
  $boxRows = $row['Rows'];
  $animSpeed = $row['AnimSpeed'];
  $pauseTime = $row['TimeLapse'];
?>

<script type="text/javascript">
$(window).load(function() {
  $('#slider').nivoSlider({
    effect: '<?php echo $effect;?>',
    slices:  '<?php echo $slices;?>',
    boxCols:'<?php echo $boxCols;?>',
    boxRows:  '<?php echo $boxRows;?>',
    animSpeed:'<?php echo $animSpeed ;?>',
    pauseTime: '<?php echo $pauseTime;?>',
    startSlide: 0,
    directionNav: false,
    controlNav: false,
    controlNavThumbs: false,
    pauseOnHover: false,
    manualAdvance: false,
    randomStart: false,
    beforeChange: function(){},
    afterChange: function(){},
    slideshowEnd: function(){},
    lastSlide: function(){},
    afterLoad: function(){}
  });
});
</script>
<?php
  echo '<img src="/'.$ImagePath .''.$row['PromotionImage'].'"/> ';
?>
<?php } ?>

上述结果如下：

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'sliceUp',
slices:  '30',
boxCols:'16',
boxRows:  '8',
animSpeed:'8000',
pauseTime: '12000',
startSlide: 0,
directionNav: false,
controlNav: false,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: false,
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
</script>
<img src="/apps/signage/promotion_images/EXBHX/boards/DS2/monday_portrait.png"/>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'boxRain',
slices:  '10',
boxCols:'12',
boxRows:  '8',
animSpeed:'8000',
pauseTime: '6000',
startSlide: 0,
directionNav: false,
controlNav: false,
controlNavThumbs: false,
pauseOnHover: false,
manualAdvance: false,
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
});
});
</script>
<img src="/apps/signage/promotion_images/EXBHX/boards/DS2/tuesday_portrait.png"/>

这不起作用，它显示相同的内容：error：example.com/apps/signage/exbhx/ds2/undefined这不会停止脚本的运行，但它会在显示循环开始时显示一个空白页。

我可以用不同的方式编写更多的代码，但没有任何工作。

我输得一塌糊涂，谁能帮帮我？

非常感谢您的时间。

库中的代码

Line 90 to line 111

    //Create caption
    slider.append($('<div class="nivo-caption"></div>'));

    // Process caption function
    var processCaption = function(settings){
        var nivoCaption = $('.nivo-caption', slider);
        if(vars.currentImage.attr('title') != '' && vars.currentImage.attr('title') != undefined){
            var title = vars.currentImage.attr('title');
            if(title.substr(0,1) == '#') title = $(title).html();   

            if(nivoCaption.css('display') == 'block'){
                setTimeout(function(){
                    nivoCaption.html(title);
                }, settings.animSpeed);
            } else {
                nivoCaption.html(title);
                nivoCaption.stop().fadeIn(settings.animSpeed);
            }
        } else {
            nivoCaption.stop().fadeOut(settings.animSpeed);
        }
    }


Line 210 to line 240

    // Add slices for slice animations
    var createSlices = function(slider, settings, vars) {
        if($(vars.currentImage).parent().is('a')) $(vars.currentImage).parent().css('display','block');
        $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').width(slider.width()).css('visibility', 'hidden').show();
        var sliceHeight = ($('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().is('a')) ? $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').parent().height() : $('img[src="'+ vars.currentImage.attr('src') +'"]', slider).not('.nivo-main-image,.nivo-control img').height();

        for(var i = 0; i < settings.slices; i++){
            var sliceWidth = Math.round(slider.width()/settings.slices);

            if(i === settings.slices-1){
                slider.append(
                    $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ 
                        left:(sliceWidth*i)+'px', 
                        width:(slider.width()-(sliceWidth*i))+'px',
                        height:sliceHeight+'px', 
                        opacity:'0',
                        overflow:'hidden'
                    })
                );
            } else {
                slider.append(
                    $('<div class="nivo-slice" name="'+i+'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block !important; top:0; left:-'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px;" /></div>').css({ 
                        left:(sliceWidth*i)+'px', 
                        width:sliceWidth+'px',
                        height:sliceHeight+'px',
                        opacity:'0',
                        overflow:'hidden'
                    })
                );
            }
        }

第256行至第286行

        for(var rows = 0; rows < settings.boxRows; rows++){
            for(var cols = 0; cols < settings.boxCols; cols++){
                if(cols === settings.boxCols-1){
                    slider.append(
                        $('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ 
                            opacity:0,
                            left:(boxWidth*cols)+'px', 
                            top:(boxHeight*rows)+'px',
                            width:(slider.width()-(boxWidth*cols))+'px'

                        })
                    );
                    $('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
                } else {
                    slider.append(
                        $('<div class="nivo-box" name="'+ cols +'" rel="'+ rows +'"><img src="'+ vars.currentImage.attr('src') +'" style="position:absolute; width:'+ slider.width() +'px; height:auto; display:block; top:-'+ (boxHeight*rows) +'px; left:-'+ (boxWidth*cols) +'px;" /></div>').css({ 
                            opacity:0,
                            left:(boxWidth*cols)+'px', 
                            top:(boxHeight*rows)+'px',
                            width:boxWidth+'px'
                        })
                    );
                    $('.nivo-box[name="'+ cols +'"]', slider).height($('.nivo-box[name="'+ cols +'"] img', slider).height()+'px');
                }
            }
        }

        sliderImg.stop().animate({
            height: $(vars.currentImage).height()
        }, settings.animSpeed);
    };

Line 356 to line 364

        // Run random effect from specified set (eg: effect:'fold,fade')
        if(settings.effect.indexOf(',') !== -1){
            anims = settings.effect.split(',');
            currentEffect = anims[Math.floor(Math.random()*(anims.length))];
            if(currentEffect === undefined) { currentEffect = 'fade'; }
        }

共有1个答案

韦宏扬

2023-03-14

我以前没有用过nivoslider。还有，我找不到任何详细的文档为这个插件。所以，我决定看看它的代码。

据我所知，这个插件对滑块内的所有图像都使用了通用的config（option）对象。

我找不到一种方法来改变默认情况下每个图像的属性。

所以，我决定编辑库代码。

我的目标很简单。我不是从选项中获取滑块属性，而是希望在img标记中传递这些属性，如data-nseffect='box rain'。然后在库中，我想像.data('nseffect')那样访问它。

这里是我在图书馆所做的改变。

行号：361

  var currentEffect = vars.currentImage.data('nseffect') || settings.effect;
  console.log('effect', currentEffect);

行号：223

  settings.slices = vars.currentImage.data('nsslices') || settings.slices;
  console.log('slices', settings.slices);

行号：263

  settings.boxCols = vars.currentImage.data('nsboxcols') || settings.boxCols;
  console.log('boxCols', settings.boxCols);

  settings.boxRows = vars.currentImage.data('nsboxrows') || settings.boxRows;
  console.log('boxRows', settings.boxRows);

行号：99

  settings.animSpeed = vars.currentImage.data('nsanimspeed') || settings.animSpeed;
  console.log('animSpeed', settings.animSpeed);

不幸的是，它只从第一个img属性获取pausetime并创建一个setinterval，因此，它应该是滑块内所有图像通用的。

这里是HTML部分。

    <div id="slider" class="nivoSlider">
        <img src="images/toystory.jpg"
        data-thumb="images/toystory.jpg"
        alt = ""
        data-nseffect = "boxRain"
        data-nsslices = "30"
        data-nsboxcols = "10"
        data-nsboxrows = "5"
        data-nsanimspeed = "5000"
        data-nspausetime = "3000"
        />

        <a href="http://dev7studios.com">
          <img src="images/up.jpg"
          title="This is an example of a caption"
          data-nseffect = "sliceUp"
          data-nsslices = "35"
          data-nsboxcols = "15"
          data-nsboxrows = "6"
          data-nsanimspeed = "3000"
          data-nspausetime = "3000"
           />
        </a>

      ...
      ...

    </div>

最后在PHP中

<div id="slider" class="nivoSlider">
 <?php while($row = mysqli_fetch_assoc($result)) {
 $effect = $row['Effect'];
 $slices = $row['Slices'];
 $boxCols = $row['Cols'];
 $boxRows = $row['Rows'];
 $animSpeed = $row['AnimSpeed'];
 $pauseTime = $row['TimeLapse'];
 echo '<img src="/'.$ImagePath .''.$row['PromotionImage'].'"
    data-nseffect = "'.$effect.'"
    data-nsslices = "'.$slices.'"
    data-nsboxcols = "'.$boxCols.'"
    data-nsboxrows = "'.$boxRows.'"
    data-nsanimspeed = "'.$animSpeed.'"
    data-nspausetime = "'.$pauseTime.'"
    />';
  }?>
</div>
...
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>

注意：我从他们的官方GitHub这里取了这个库。

对我有用。希望对你有帮助。：）

类似资料：

来自蟒蛇的幻灯片计数？

计算特定目录中所有，，，和文件的总页数;但我对如何计算幻灯片有点困惑。这是我尝试过的：此外，我尝试使用python-pptx，但收到了lxml错误（因此尝试构建我自己的lxml；这在icon v依赖问题上出错）。此外，由于它只支持pptx，我需要为ppt找到另一种方法。PowerPoint 2013 x64已安装，我使用的是Python 2.7.4 x64。
一页上的多个幻灯片显示使第一个幻灯片不再起作用

问题内容：首先，我知道在回答不能解决我的问题之前就已经问过这个问题了，所以我想再问一遍：我使用了“ W3school”的幻灯片代码，该代码提供了很好的动画Jquery幻灯片。不幸的是，我的页面上需要多个，第二个页面使第一个页面无法正常工作。甚至在这里找到此解决方案之前，我都尝试过更改不同幻灯片对象的CSS和HTML名称，从而成功地解决了一部分问题（第二个未显示），但是如前所述，第一个问题停止了工
请手写一个幻灯片的效果

本文向大家介绍请手写一个幻灯片的效果相关面试题，主要包含被问及请手写一个幻灯片的效果时的应答技巧和注意事项，需要的朋友参考一下使用css3 动画就可以，预览地址：https://codepen.io/ansonznl/pen/KLyJjX
使用内部变量。幻灯片

我正在开发一个交互式Powerpoint演示文稿，用户将单击照片的缩略图并能够几乎全屏查看它。我在使用.形状和.幻灯片方法时遇到了困难。我想在演示文稿中的一张幻灯片上出现几个较小的图像。如果用户想查看非常大的图像，他们只需要单击图像。然后，我希望图像出现在它自己的新生成的幻灯片上，尽可能大。当他们单击较大的图像时，他们将被带回他们正在查看的较小图像幻灯片。这很容易实现，通过为显示中的每个小图像制
是否有一种方法可以为幻灯片命名，并用这个名称而不是幻灯片索引来选择幻灯片？

类似于幻灯片上的对象如何命名和调用例如，我目前在哪里工作：我需要做的事情大致如下: 主要是因为幻灯片可能是动态的，并且我不热衷于在每次幻灯片更改时更改每个代码块中每个幻灯片的引用。老实说，在Powerpoint中找不到任何实际命名幻灯片的功能。我读过关于通过命名标题对象来做到这一点的功能，但这对我来说似乎没有意义，也不适合我。希望你能帮忙！
幻灯片

使用幻灯片组件，你需要在 sm.js 和 sm.css 之后额外引入如下两个文件: <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"> <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-exte

通过一个数组来填充nivoSlider的变量，每个幻灯片都有自己的设置

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档