JS InfiniteRotator随机顺序

Question

我的网站上有一个图像旋转器，但是我希望图像以随机顺序出现，这样一来，相同的图像并不总是首当其冲。 我有旋转器，但是我不知道如何将其随机化。 我的代码在JS Bin上： http : //jsbin.com/dogimawuli/edit?html，输出

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script>
  <script>
  $(window).load(function() {   

    var InfiniteRotator = 
  {
    init: function()
    {
        //initial fade-in time (in milliseconds)
        var initialFadeIn = 1000;

        //interval between items (in milliseconds)
        var itemInterval = 4000;

        //cross-fade time (in milliseconds)
        var fadeTime = 50;

        //count number of items
        var numberOfItems = $('.rotating-item').length;

        //set current item
        var currentItem = 0;

        //show first item
        $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

        //loop through the items        
        var infiniteLoop = setInterval(function(){
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            if(currentItem == numberOfItems -1){
                currentItem = 0;
            }else{
                currentItem++;
            }
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);   
     }  
  };

  InfiniteRotator.init();

});
  </script>
  <style>
    #rotating-item-wrapper {position: relative;width: 468px;height: 60px;float: right;}
    .rotating-item {display: none;position: absolute;top: 0;left: 0;}
  </style>
</head>
<body>
    <div id="rotating-item-wrapper">
      <div style="width:400px;height:60px;background:red;"class="rotating-item">1</div>
      <div style="width:400px;height:60px;background:green;"class="rotating-item">2</div>
      <div style="width:400px;height:60px;background:blue;"class="rotating-item">3</div>
   </div>
</body>
</html>

Answer 1

尝试这个：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Test</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=3.0.1"></script>
  <script>
  $(window).load(function() {   
      debugger;
    var InfiniteRotator = 
  {
    init: function()
    {
        //initial fade-in time (in milliseconds)
        var initialFadeIn = 1000;

        //interval between items (in milliseconds)
        var itemInterval = 4000;

        //cross-fade time (in milliseconds)
        var fadeTime = 50;

        //count number of items
        var numberOfItems = $('.rotating-item').length;

        //set current item
        var currentItem = Math.floor(Math.random() * numberOfItems)


        //show first item
        $('.rotating-item').eq(currentItem).fadeIn(initialFadeIn);

        //loop through the items        
        var infiniteLoop = setInterval(function(){
            $('.rotating-item').eq(currentItem).fadeOut(fadeTime);

            nextItem = currentItem;
            while(currentItem == nextItem) {
                nextItem = Math.floor(Math.random() * numberOfItems);
            }
            currentItem = nextItem;
            $('.rotating-item').eq(currentItem).fadeIn(fadeTime);

        }, itemInterval);   
     }  
  };

  InfiniteRotator.init();

});
  </script>
  <style>
    #rotating-item-wrapper {position: relative;width: 468px;height: 60px;float: right;}
    .rotating-item {display: none;position: absolute;top: 0;left: 0;}
  </style>
</head>
<body>
    <div id="rotating-item-wrapper">
      <div style="width:400px;height:60px;background:red;"class="rotating-item">1</div>
      <div style="width:400px;height:60px;background:green;"class="rotating-item">2</div>
      <div style="width:400px;height:60px;background:blue;"class="rotating-item">3</div>
   </div>
</body>
</html>

基本上，您正在遍历与当前图像不同的下一个随机数，缺点是某些图像将被“饿死”，直到随机数选择该图像数为止。

JS InfiniteRotator随机顺序

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-10-06 16:39:26

JS InfiniteRotator随机顺序

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-10-06 16:39:26

解决方案1
0 已采纳 2016-10-06 16:39:26