Question

我有一个图像滑块。

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

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

我该怎么做？

这是我的jsfiddle：

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

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 CODE

<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未定义。它只显示第一个错误，因此在您使用slidecount修复错误后，它会显示count错误。

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

以下内容适用（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）

1 个答案: