时间戳

首页 > 解决方案 > 使用 Nivo-Slider jquery 插件循环遍历数组以显示图像

jquery - 使用 Nivo-Slider jquery 插件循环遍历数组以显示图像

问题描述

我之前也问过类似的问题，但我的目标并没有完全明确，所以我再次询问更多信息。我正在尝试编写一个脚本，该脚本使用“jquery.nivo.slider.js”在页面上创建图像幻灯片。我已经阅读了有关 nivo-slider 主题的所有帖子，但没有一篇涉及使用从查询返回的变量。

图像名称与动画速度和暂停时间一起存储在 MySQL 数据表中。我运行查询以获取数据，然后将返回的变量传递给 nivo-slider 脚本。

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

为了遍历返回的数据，我使用了一个 php“do while”循环，认为找到的每条记录都会使用 nivo-slider 脚本中返回的变量。我遇到的问题是 nivo 脚本没有选择“效果、动画和暂停时间，而是显示效果、动画和暂停时间的随机序列。完整的脚本如下所示：

<body>
<div id="wrapper">
<div class="slider-wrapper">
<div id="slider" class="nivoSlider"> 
<?php do { ?>
<script type="text/javascript">
$(window).load(function() {
    var TimeLapse = '<?php echo $row_fb['TimeLapse'];?>';   
    var Effect = '<?php echo $row_fb['Effect'];?>'; 
    var AnimSpeed = '<?php echo $row_fb['AnimSpeed'];?>';
    $('#slider').nivoSlider({
        effect: Effect,
        slices: 1,
        boxCols: 1,
        boxRows : 1,    
        animSpeed: AnimSpeed,
        pauseTime: TimeLapse,
        startSlide: 0,
        directionNav: false,
        controlNav: false,
        controlNavThumbs: false,
        pauseOnHover: false,
        manualAdvance: false,
        prevText: '',
        nextText: '',
        randomStart: false,
        beforeChange: function(){},
        slideshowEnd: function(){},
        lastSlide: function(){},
        afterLoad: function(){},
        afterChange: function(){},
    });
});
</script>
<img src="<?php echo $ImagePath.''.$row_fb['ImageName'];?>"   data-transition="<?php echo $row_fb['Effect'];?>" />
<?php } while($row_fb = mysqli_fetch_assoc($fb)); ?>
 </div>
</div>
</body>

谁能看到我做错了什么？

标签： jquerynivo-slider

解决方案

推荐阅读