简单jQuery旋转器

Posted 2021-02-24

The code is in three parts, a html layout (with some requirements I'll go over below), some CSS code (again, requirements below) and the actual jQuery code. I go over all the code in detail at the link, but I'll give a quick rundown od the jQuery as well.

The HTML:
The button that control next and previous are given IDs of "rotator_next" and "rotator_prev" respectively. The content shows in the a div with the ID "rotator_box". Inside the "rotator_box" div there a other divs with the IDs "rotator_set_#" where # is a number, 1 through as many pages as you want.

The CSS:
The important part of the style is the width, height, and overflow property. The width and height allow you to control the way the items are display, be it column, grid, or standard horizontal orientation.

The jQuery:
The script runs on document load and sets up a click even for the next and previous buttons. This evens add or subtract the lastviwed accordingly and run the update function, which does the fading out and fading in. After the contents have faded in it sets the opacity to 1, this is just to prevent any overzealous user from clicking so fast it makes a page stop wanting to fade fully in.

Like I said, theres more info and an example at the link.

/* HTML */
<div class="rotator_container">
    <div id="rotator_prev"></div>
    <div id="rotator_box">
        <div id="rotator_set_1">
            <a href="http://www.google.com"><img src="img/bugatti.jpg" /></a>
            <a href="http://www.google.com"><img src="img/nissian.jpg" /></a>
            <a href="http://www.google.com"><img src="img/porsche.jpg" /></a>
            <a href="http://www.google.com"><img src="img/toyota.jpg" /></a>
        </div>
        <div id="rotator_set_2">
            <a href="http://www.google.com"><img src="img/donkeykong.jpg" /></a>
            <a href="http://www.google.com"><img src="img/hero.jpg" /></a>
            <a href="http://www.google.com"><img src="img/spyvsspy.jpg" /></a>
            <a href="http://www.google.com"><img src="img/superzaxxon.jpg" /></a>
        </div>
        <div id="rotator_set_3">
            <a href="http://www.google.com"><img src="img/b1.jpg" /></a>
            <a href="http://www.google.com"><img src="img/b2.jpg" /></a>
            <a href="http://www.google.com"><img src="img/b3.jpg" /></a>
        </div>
    </div>
    <div id="rotator_next"></div>
</div>
 
/* CSS */
#rotator_box{
    width: 354px;
    height: 254px;
    background-color: black;
    display: inline-block;
    vertical-align: middle;
    padding: 4px;
    overflow: hidden;
}
 
/* jQuery */
$(document).ready(function(){
    var lastloaded = 1
    var maxloadable = $('#rotator_box > div').length;
    $('#rotator_prev').click(function(){
        if(lastloaded-1==0){
            lastloaded=maxloadable;
        }else{
            lastloaded=lastloaded-1;
        }
        update();
    });
    $('#rotator_next').click(function(){
        if(lastloaded+1>maxloadable){
            lastloaded=1;
        }else{
            lastloaded=lastloaded+1;
        }
        update();
    });
    function update(){
        $("#rotator_box > *:visible").fadeOut(175,function(){
            $("#rotator_set_"+lastloaded).fadeIn(175,function(){
                $("#rotator_set_"+lastloaded).css('opacity','1');
            });
        });
    }
})