JS InfiniteRotator 무작위 순서

내 웹 사이트에 이미지 회전기가 있지만 이미지가 임의의 순서로 나타나기를 원합니다. 같은 이미지가 항상 먼저 나오는 것은 아닙니다. 회전 장치를 작동 시켰지만 무작위 배정 방법을 모르겠습니다. http://jsbin.com/dogimawuli/edit?html,output JS InfiniteRotator 무작위 순서

<!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>

출처

2016-10-06 claire

이렇게하면 0-2에서 임의의 숫자를 얻을 수 있습니다. - var currentItem = Math.floor (Math.random() * numberOfItems) – dmoo

이 시도 : 내 코드는 여기 JS 빈에

기본적으로 현재 이미지와 동일한 하나이 있다는 것입니다 단점 아닌 다음 난수 통해 반복되는

<!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>

임의의 숫자가 해당 이미지 번호를 선택할 때까지 일부 이미지는 "굶어 죽을 것"입니다.

출처

2016-10-06 16:39:26

감사합니다. 한 가지 주목할 점은 일부 이미지가 다른 이미지보다 더 많이 표시된다는 것입니다. 어쨌든 각 이미지가 시간의 일정 비율을 차지하도록 설정해야합니까? 아니면 너무 복잡해지고있는 것입니까? – claire

JS InfiniteRotator 무작위 순서

답변

관련 문제