Randomly swap images in HTML when a button is clicked

Question

Randomly swap images in HTML when a button is clicked

In order to change images randomly on mouse click, I came across this solution:

<SCRIPT LANGUAGE="Javascript">
function banner() { } ; b = new banner() ; n = 0
b[n++]= "<A HREF='index.html'><IMG SRC='images/pic1.jpg'></A>"
b[n++]= "<A HREF='index.html'><IMG SRC='images/pic2.jpg'></A>"
b[n++]= "<A HREF='index.html'><IMG SRC='images/pic3.jpg'></A>"
b[n++]= "<A HREF='index.html'><IMG SRC='images/pic4.jpg'></A>"
i=Math.floor(Math.random() * n) ; 
document.write( b[i] )
</SCRIPT>

Although this method works well, I want "pic1" to always stay as the first picture (even when refreshing the page), and I also do not want "pic1" to be included in the selection of other pictures that change randomly on mouse click.

Thank you, Aviv

jquery html css image

Answer 1

Answer №1

Recently, I implemented this feature in a project where the initial slide remains consistent.

http://example.com/jsfiddle/8HsAc/4/ Click on Change Order multiple times to witness the transition between second and third images.

<button class="shuffle-order">Change Sequence!</button>

<ul>
    <li class="panel current">
        <img src="http://placeholder.com/250x250" />
    </li>
    <li class="panel current">
        <img src="http://placeholder.com/350x250" />
    </li>
    <li class="panel current">
        <img src="http://placeholder.com/450x250" />
    </li>                
</ul>


$(document).ready(function() {
    // Reorder slides excluding the first one
    $('.sequence').click(function(e) {
        $('ul').each(function(){
            var $ul = $(this);
            var $liArr = $ul.children('li:not(:first)');

            // randomly shuffle list items within current ul
            $liArr.sort(function(a,b){
                var temp = parseInt( Math.random()*10 );
                var isOddOrEven = temp%2;
                var isPosOrNeg = temp>5 ? 1 : -1;
                return( isOddOrEven*isPosOrNeg );
            })
            // append shuffled list items back to ul
            .appendTo($ul);            
        }); 
    });
});

Answer 2

Recently, I implemented this feature in a project where the initial slide remains consistent.

http://example.com/jsfiddle/8HsAc/4/ Click on Change Order multiple times to witness the transition between second and third images.

<button class="shuffle-order">Change Sequence!</button>

<ul>
    <li class="panel current">
        <img src="http://placeholder.com/250x250" />
    </li>
    <li class="panel current">
        <img src="http://placeholder.com/350x250" />
    </li>
    <li class="panel current">
        <img src="http://placeholder.com/450x250" />
    </li>                
</ul>


$(document).ready(function() {
    // Reorder slides excluding the first one
    $('.sequence').click(function(e) {
        $('ul').each(function(){
            var $ul = $(this);
            var $liArr = $ul.children('li:not(:first)');

            // randomly shuffle list items within current ul
            $liArr.sort(function(a,b){
                var temp = parseInt( Math.random()*10 );
                var isOddOrEven = temp%2;
                var isPosOrNeg = temp>5 ? 1 : -1;
                return( isOddOrEven*isPosOrNeg );
            })
            // append shuffled list items back to ul
            .appendTo($ul);            
        }); 
    });
});

Randomly swap images in HTML when a button is clicked

Answer №1

Similar questions

Eliminate the AM and PM options from the input time selection dropdown menu in HTML

"Struggling to make the 'overflow: hidden' property work for an absolutely positioned

Scrolling triggers events

I'm having trouble getting the float left to work properly in my HTML/CSS code

Value of an object passed as a parameter in a function

Choosing a row in a table with ASP.NET by utilizing jQuery on click

Floating a div while scrolling down until the footer is reached

Is using tables still considered a recommended practice for organizing a layout such as the one shown in the [IMG]?

Modify the size of the text in an <iframe> using inline css

The $_REQUEST variable is functioning properly, while the $_POST variable seems to

What is the best way to determine which button was clicked in Django?

Using jQuery to animate one widget with the login widget

The CSS selector "not:nth-child" is failing to function properly within the template

What is the best way to ensure email address validation is done perfectly every time?

Utilizing Backbone script for fetching data from an external JSON source

Align the text characters vertically within a word or sentence

"Placing the save button on top of a div - a step

Ajax encountered a problem while attempting to download the file

Issues with implementing @font-face on a singular font

Tips for organizing and sorting date data in a JSON datatable