随机图像滑块 (JS)

Question

我有一个图片滑块。

不幸的是，图片滑块卡在第二张图片上。

我希望图像滑块在无限随机循环中循环显示图像。

我该怎么做？

这是我的 jsfiddle：

http://jsfiddle.net/rAqcP/248/

--------------- ------------------------

JS代码

$(document).ready(function() {

//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide',{direction:'right'},500);
$('.slider #1').delay(5500).hide('slide',{direction:'left'},500);

var sliderTotalImg = $('.slider img').size();    
var counterIndex = 2;

setInterval(function () {

    //$('.slider #' + counterIndex).show({right:'0'}, 500);
    $('.slider #' + counterIndex).show('slide',{direction:'right'},500);
    $('.slider #' + counterIndex).delay(5500).hide('slide',{direction:'left'},500);

    if(count==slidecount){
count=1;

}else{
count=count+1;
}
},6500);});

DIV 代码

<div class = "slider">
<img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/001.png"/>
<img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/002.png"/>
<img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/003.png"/>
<img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/004.png"/>
</div>

CSS 代码

.slider {
width: 20%;
height: 30%;
overflow:hidden;
border: 1px solid black;
background-image:url("http://test.softvex.com/Slider/Img/loading.gif");
background-repeat:no-repeat;
background-position:center;
}

.slider img {
    display:none;
}

Answer 1

你永远不会定义 slidecount。它仅在您的 if 语句中使用。你永远不会定义 count。它的第一次使用是在同一个 if 语句中。

我不确定您是否这样做了，但您可以查看控制台输出（键盘快捷键 F12）以查看您的代码中出现了什么错误。在您的原始代码中，错误是 count 未定义。它只显示第一个错误，因此在用 count.

修复错误后，它会显示关于 slidecount 的错误

注意：您的代码中没有任何内容是随机的。所以，我不确定你打算随机生成什么。

以下将起作用 (JSFiddle)：

$(document).ready(function() {

  //$('.slider #1').show({right:'0'}, 500);
  $('.slider #1').show('slide', {
    direction: 'right'
  }, 500);
  $('.slider #1').delay(5500).hide('slide', {
    direction: 'left'
  }, 500);

  var sliderTotalImg = $('.slider img').size();
  var counterIndex = 2;
  var slidecount = 4;

  setInterval(function() {

    //$('.slider #' + counterIndex).show({right:'0'}, 500);
    $('.slider #' + counterIndex).show('slide', {
      direction: 'right'
    }, 500);
    $('.slider #' + counterIndex).delay(5500).hide('slide', {
      direction: 'left'
    }, 500);

    if (counterIndex >= slidecount) {
      counterIndex = 1;

    } else {
      counterIndex++;
    }
  }, 6500);
});

.slider {
  width: 20%;
  height: 30%;
  overflow: hidden;
  border: 1px solid black;
  background-image: url("http://test.softvex.com/Slider/Img/loading.gif");
  background-repeat: no-repeat;
  background-position: center;
}
.slider img {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div class="slider">
  <img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/001.png" />
  <img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/002.png" />
  <img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/003.png" />
  <img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/BLANK-Theme/images/Pokemon/004.png" />
</div>

随机图像滑块 (JS)

Random Image Slider (JS)

html

javascript

css

jquery

slideshow