使用s3slider的随机图片

Question

我试图用我下载的这个插件随机显示图像。 （s3slider）

这里是创造者的代码

(function($){ 

    $.fn.s3Slider = function(vars) {  

     var element  = this; 
     var timeOut  = (vars.timeOut != undefined) ? vars.timeOut : 4000; 
     var current  = null; 
     var timeOutFn = null; 
     var faderStat = true; 
     var mOver  = false; 
     var items  = $("#" + element[0].id + "Content ." + element[0].id + "Image"); 
     var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); 

     items.each(function(i) { 

      $(items[i]).mouseover(function() { 
       mOver = true; 
      }); 

      $(items[i]).mouseout(function() { 
       mOver = false; 
       fadeElement(true); 
      }); 

     }); 

     var fadeElement = function(isMouseOut) { 
      var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; 
      thisTimeOut = (faderStat) ? 10 : thisTimeOut; 
      if(items.length > 0) { 
       timeOutFn = setTimeout(makeSlider, thisTimeOut); 
      } else { 
       console.log("Poof.."); 
      } 
     } 

     var makeSlider = function() { 
      current = (current != null) ? current : items[(items.length-1)]; 
      var currNo  = jQuery.inArray(current, items) + 1 
      currNo = (currNo == items.length) ? 0 : (currNo - 1); 
      var newMargin = $(element).width() * currNo; 
      if(faderStat == true) { 
       if(!mOver) { 
        $(items[currNo]).fadeIn((timeOut/6), function() { 
         if($(itemsSpan[currNo]).css('bottom') == 0) { 
          $(itemsSpan[currNo]).slideUp((timeOut/6), function() { 
           faderStat = false; 
           current = items[currNo]; 
           if(!mOver) { 
            fadeElement(false); 
           } 
          }); 
         } else { 
          $(itemsSpan[currNo]).slideDown((timeOut/6), function() { 
           faderStat = false; 
           current = items[currNo]; 
           if(!mOver) { 
            fadeElement(false); 
           } 
          }); 
         } 
        }); 
       } 
      } else { 
       if(!mOver) { 
        if($(itemsSpan[currNo]).css('bottom') == 0) { 
         $(itemsSpan[currNo]).slideDown((timeOut/6), function() { 
          $(items[currNo]).fadeOut((timeOut/6), function() { 
           faderStat = true; 
           current = items[(currNo+1)]; 
           if(!mOver) { 
            fadeElement(false); 
           } 
          }); 
         }); 
        } else { 
         $(itemsSpan[currNo]).slideUp((timeOut/6), function() { 
         $(items[currNo]).fadeOut((timeOut/6), function() { 
           faderStat = true; 
           current = items[(currNo+1)]; 
           if(!mOver) { 
            fadeElement(false); 
           } 
          }); 
         }); 
        } 
       } 
      } 
     } 

     makeSlider(); 

    }; 

})(jQuery); 

所有射击这个js文件的代码在我的头，当我做....现在我怎么会随机我所有的图片？

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#s3slider').s3Slider({ 
     timeOut: 4000 
    }); 
}); 
</script> 

任何和所有的帮助是值得赞赏的。

Answer 1

对于随机，你可以在服务器端随机输出它们，如果页面是动态的，或者我使用数组shuffle插件。

(function ($) { $.shuffle = function (arr) { for (var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x); return arr; } })(jQuery); 

输入像

​​

然后输出数组到s3slider

for (var i = 0; i < imageArr.length; i++) { 
    $('#s3SliderContent').append("<li><img src='/images/" + imageArr[i] + "'></li>"); 
} 

Answer 2

或者做它的一个更简单的方法...

更换线50 s3slider.js

current = (current != null) ? current : items[(items.length-1)]; 

有了这个：

current = (current != null) ? current : items[(Math.floor(Math.random()*(items.length)))]; 

中提琴！