Question

我正在学习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');
}

这就是我想要的：

当我点击＆＃34;继续＆＃34;时，将显示下一张图像。

单击后退时，将显示更多图像。

我该怎么做？

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>

它的效果非常好但不适合火狐......我不知道为什么......

Answer 1

(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.

)();

图像随机化器 - jQuery

1 个答案: