隨機圖像滑塊（JS）

不幸的是，圖像滑塊卡在第二個圖像上。

我希望圖像滑塊在無限循環中循環顯示圖像。

我該怎麼做？

這裏是我的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; 
}

來源

2016-09-04 Shen Hui Zhang

哪一部分是隨機的？ – Li357

如果您打算將我們指向JSFiddle，它應該是功能性的（即應該顯示問題）。你的JSFiddle不是。 – Makyen

修正：http://jsfiddle.net/rAqcP/248/ –

你從來沒有定義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>

來源

2016-09-04 06:42:15 Makyen

非常感謝！ –

隨機圖像滑塊（JS）

回答

相關問題