圖像隨機數發生器 - jQuery

我正在學習jQuery，我想實現一個圖像隨機數發生器。圖像隨機數發生器 - jQuery

我有一個需要顯示的圖像列表。我希望它們隨機顯示。

這是我已經實現，但它窗臺方式已經不能滿足我：

/** Initialisierung*/ 
function showFotos() { 

// Nummern der Bilder im Verzeichnis 'images' 
start_nr = 1; 
end_nr = 5; 


// Bilder eventuell vorladen 
for (i=start_nr; i<=end_nr; i++) { 
preload_img = new Image(); 
preload_img.src = 'images/' + i + '.jpg'; 
} 
// #show-1, #show-2, #show-3 bekommen einen zunächst 'leeren' img-tag mit den Dimensionen der Bilder zugefügt 
$('#show-1').append('<img src="" width="250" height="250" />'); 
// Diese Function wird einmalig aufgerufen und somit Start-Bilder initialisiert 
randomize(); 
} 

// Random Funktion -> kleinster, grösster Wert 
function randomXToY(minVal,maxVal,floatVal) { 
var randVal = minVal+(Math.random()*(maxVal-minVal)); 
return typeof floatVal=='undefined'?Math.round(randVal):randVal. toFixed(floatVal); 
} 

// die 'Slotmachine' 
function randomize() { 
// die fünf Slots 
for (i=1; i<=5; i++) { 
// Zufallszahl 
num = randomXToY(start_nr, end_nr); 
// Zufallszahl = Bildnummer 
$('#show-' + i + ' img').attr('src', 'images/' + num + '.jpg'); 
}

這就是我想要的：

當我點擊「繼續」，接下來將顯示圖像。

當我點擊後面時，會顯示更多的圖像。

我該怎麼辦？

enter image description here

UPDATE !!!! 我解決了問題！

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>jQuery UI Spinner - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<style type="text/css"> 
#items { 
    position : relative; 
    width : 400px; 
    height : 200px; 
    top : 20px; 
    left : 20px; 
} 
.item { 

    position : absolute; 
    border : 1px solid #ccc; 
    width : 398px; 
    height : 198px; 
    display :none; 
    text-align : right; 
    font-size : 40px; 
} 
.first{ 
    display : block; 
} 
#controls { 
    margin-top : 30px; 
} 
li { 
    display : inline-block; 
    padding : 5px; 
    border : 1px solid #ccc; 
    background-color : #eee; 
    cursor : pointer; 
} 
#play { 
    display : none; 
} 
.first#item1 { 
    background-image: url(D:/images/images1.jpg); 
    background-repeat: no-repeat; 
     width : 398px; 
    height : 198px; 
} 
.item#item2 { 
     background-image: url(D:/images/images2.jpg); 
    background-repeat: no-repeat; 
     width : 398px; 
    height : 198px; 
} 
.item#item3 { 
     background-image: url(D:/images/images2.jpg); 
    background-repeat: no-repeat; 
     width : 398px; 
    height : 198px; 
} 

.item#item4{ 
     background-image: url(D:/images/images4.jpg); 
    background-repeat: no-repeat; 
     width : 398px; 
    height : 198px; 
} 
.item#item5{ 
    background-image: url(D:/images/images5.jpg); 
    background-repeat: no-repeat; 
     width : 398px; 
    height : 198px; 
} 
</style> 
<script> 
$(function() { 

//To store timeout id 
var timeoutId; 

var slideImage = function(step) { 

    if (step == undefined) step = 1; 

    //Clear timeout if any 
    clearTimeout (timeoutId); 

    //Get current image's index 
    var indx = $('.item:visible').index('.item'); 

    //If step == 0, we don't need to do any fadein our fadeout 
    if (step != 0) { 
     //Fadeout this item 
     $('.item:visible').fadeOut(); 
    } 

    //Increment for next item 
    indx = indx + step ; 

    //Check bounds for next item 
    if (indx >= $('.item').length) { 
     indx = 0; 
    } else if (indx < 0) { 
     indx = $('.item').length - 1; 
    } 

    //If step == 0, we don't need to do any fadein our fadeout 
    if (step != 0) { 
     //Fadein next item 
     $('.item:eq(' + indx + ')').fadeIn(); 
    } 

    //Set Itmeout 
    timeoutId = setTimeout (slideImage, 5000); 
}; 

//Start sliding 
slideImage(0); 

//When clicked on prev 
$('#prev').click(function() { 

    //slideImage with step = -1 
    slideImage (-1); 
}); 

//When clicked on next 
$('#next').click(function() { 

    //slideImage with step = 1 
    slideImage (1); 
}); 

//When clicked on Pause 
$('#pause').click(function() { 

    //Clear timeout 
    clearTimeout (timeoutId);  

    //Hide Pause and show Play 
    $(this).hide(); 
    $('#play').show(); 
}); 

//When clicked on Play 
$('#play').click(function() { 

    //Start slide image 
    slideImage(0); 

    //Hide Play and show Pause 
    $(this).hide(); 
    $('#pause').show();  
}); 

}); 
</script> 
</head> 
<body> 
<div id='items'> 
    <div id= 'item1' class='item first'>item 1</div> 
    <div id= 'item2' class='item'>item2</div> 
    <div id= 'item3' class='item'>item3</div> 
    <div id= 'item4' class='item'>item4</div> 
    <div id= 'item5' class='item'>item5</div> 

</div> 
<ul id='controls'> 
    <li id='prev'> << Zurueck</li> 

    <li id='next'>Weiter >> </li> 
</ul> 
</body> 
</html>

它的工作原理非常好，但不與火狐狸...我不知道爲什麼...

來源

2013-12-17 lisa

你爲什麼從'randomXToY（）'函數返回'typeof'？我認爲你只需要返回文件名，它應該適合你。另外，當你接受三個參數時，你只需要兩個參數就可以調用這個函數......這不是一個大問題，但你永遠不知道。思考？ –

@theghostofc它正在工作！但最大的問題是使用繼續和後退按鈕... – lisa

如果你想前進和後退的圖像，你需要[建立一個隨機數組]（http://stackoverflow.com/questions/2450954/如何對隨機化洗牌-A-JavaScript的陣列）。 – Blazemonger

(function() { 

    var images = ["image1.jpg", "whatever2.png", "3", "4", "etc5"]; 

    // Randomize these images. 
    for (var i = 0; i < 20; ++i) { 
     var a = Math.floor(Math.random() * images.length)), 
      b = Math.floor(Math.random() * images.length)); 
     var tmp = images[a]; 
     images[a] = images[b]; 
     images[b] = tmp; 
    } 

    var index = 0; 

    function back() { 
     index--; 
     if (index < 0) { 
      index = images.length - 1; 
     } 
     changeImage(); 
    } 

    function next() { 
     index = (index + 1) % images.length; 
     changeImage(); 
    } 

    function changeImage() { 
     // Something like $("img.whatever").attr("src", images[index]); 
    } 

    // Hook stuff here. 

)();

來源

2013-12-17 14:14:11 jgroenen

thx爲你的答案，假設在函數changeImage（）中是什麼？我認爲back（）函數不會給我最後一張圖片，而是圖片之前的圖片，它現在正在顯示......或者你認爲怎麼樣？ – lisa

檢查changeImage（）函數，我在那裏做了一個建議。 – jgroenen

返回將給你數組中的前一張圖片。該數組是隨機的，所以圖像的順序是隨機的（但循環）。這不是你想要的嗎？（你可以接受答案。） – jgroenen

圖像隨機數發生器 - jQuery

回答

相關問題