问随机化Javascript Scrollbox插件的起点？
EN

Stack Overflow用户

提问于 2015-06-25 01:15:14

回答 1查看 47关注 0票数 0

我有一个设置的宽/高div和一个无序列表，列表中有10个li标记，每个li有一个img标记。

我有垂直滚动图像使用Javascript Scrollbox。

当你登陆页面时，我需要随机化哪个logo首先出现在框中，而不是总是首先显示第一个li (滚动可以按正常顺序继续)。

这个是可能的吗？如果是的话，你能给我指个正确的方向吗？

下面是我的代码：

HTML内部标题：

<script type="text/javascript" src="js/jquery.scrollbox.min.js"></script>

正文中的HTML：

<div id="buslogos">
<p>Some of our participating businesses:</p>

<div id="buslogoscroll" class="scroll-img">
<ul>
  <li><img src="images/part-bus-logos/abshair-sm.gif" alt="Absolute Hair Inc"></li>
  <li><img src="images/part-bus-logos/arena-sm.gif" alt="Arena Tavern"></li>
  <li><img src="images/part-bus-logos/davebusters-sm.jpg" alt="Dave &amp; Buster's"></li>
  <li><img src="images/part-bus-logos/dunkin-sm.gif" alt="Dunkin' Donuts"></li>
  <li><img src="images/part-bus-logos/lazercity-sm.jpg" alt="Lazer City"></li>
  <li><img src="images/part-bus-logos/marcos-sm.gif" alt="Marco's Pizza"></li>
  <li><img src="images/part-bus-logos/mtimes-sm.gif" alt="Medieval Times"></li>
  <li><img src="images/part-bus-logos/stars-sm.gif" alt="Stars and Strikes"></li>
  <li><img src="images/part-bus-logos/tomchee-sm.gif" alt="Tom + Chee"></li>
  <li><img src="images/part-bus-logos/totalhealth-sm.jpg" alt="Total Health Spa"></li>
</ul>
</div>
</div>

<script>
$(function () {
  $('#buslogoscroll').scrollbox({
    linear: true,
    step: 1,
    delay: 0,
    speed: 40
  });
});
</script>

可从以下位置下载jquery.scrollbox.min.js：https://github.com/wmh/jquery-scrollbox

提前感谢！

javascript

回答 1

Stack Overflow用户

发布于 2015-06-25 18:24:04

看看这个，如果你什么都不懂就告诉我。Live demo

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.js"></script>
  <script type="text/javascript" src="https://rawgit.com/wmh/jquery-scrollbox/master/jquery.scrollbox.min.js"></script>
  <script>
$(function () {
  var arrSrc=["http://placehold.it/350x50",
             "http://placehold.it/350x60",
              "http://placehold.it/350x70",
              "http://placehold.it/350x80",
              "http://placehold.it/350x90"
             ];
  $('.first img').attr('src',arrSrc[Math.floor((Math.random() * 5) + 0)]);
  $('#buslogoscroll').scrollbox({
    linear: true,
    step: 1,
    delay: 0,
    speed: 40
  });
});
</script>
</head>
<body>
  <div id="buslogos">
<p>Some of our participating businesses:</p>

<div id="buslogoscroll" class="scroll-img">
<ul>
  <li class="first"><img src=""></li>
    <li><img src="http://placehold.it/350x60"></li>
  <li><img src="http://placehold.it/350x70"></li>
  <li><img src="http://placehold.it/350x80"></li>
  <li><img src="http://placehold.it/350x90"></li>
</ul>
</div>
</div>

</body>
</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31032943

复制

相似问题

问随机化Javascript Scrollbox插件的起点？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问随机化Javascript Scrollbox插件的起点？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问随机化Javascript Scrollbox插件的起点？
EN