简体   繁体   中英

Selecting pictures with Jquery and Javascript

I'm testing out a layout on a website using 3 pictures here:

Schechterbusiness.info

the left button works, making it go through the pictures. But I can't figure out how to get the right button to work, which is supposed to scroll through the other way. I know there's probably a way to do it with arrays but I can't wrap my brain around it. Halp!

Code to scroll through pictures:

$('#fryLink').click(function() {
        $('#hide').hide();
        $('#img').hide();

    count++;

        if(count == 1) {

        $('#img').attr("src","images/fry.png");

        }
        else if(count == 2) {

        $('#img').attr("src","images/bender.png");

        }
        else if(count == 3) {

        $('#img').attr("src","images/zoidberg.png");
        }


                $('#img').show("fade");





        if(count > 2) {

        count = 0;
        }

通常,只需使用与其他方法相同的功能就足够了

count--;

following the first answere

Bind event to right mouse click

reverse the counter ;)

Try this

var count = 0;
var imgLength = 3;
$('#leftLink , #rightLink').click(function() {
    $('#hide').hide();
    $('#img').hide();
    if (this.id === 'leftLink') {
        count--;
        if (count < 0) {
            count = imgLength-1;
        }
    }
    else {
        count++;
        if (count > imgLength-1) {
            count = 0;
        }
    }
    var src = "images/fry.png";

    if (count == 1) {
        src = "images/bender.png";
    }
    else if (count == 2) {
        src = "images/zoidberg.png";
    }
    $('#img').attr('src',src).show("fade");
});​

You have count cycling through four states: 0, 1, 2, and 3. But you only set the image for states 1 - 3.

This leads to duplicating one image--whichever was the last one--when your count variable is on 0.

As to helping you get exactly what you want, unfortunately that is not really clear. Are the three buttons supposed to be a sort of "forward / something / reverse"? What do you want to happen when the center button is clicked on?

Also, making the buttons display the proper pointer/hand icon is important. Right now they show the text selection bar instead, and that makes it confusing since it conveys to the user that the items are not clickable.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM