if condition block in jquery function

There are 3 slides (page1.html, page2.html, page3.html) and 2 buttons with id's prevslide and nextslide. Goal is to show next or previous slide when user clicks one of these buttons. Main problem is to load the slideisnow variable's value exactly as next or prev slide. (eg. if now is slide page1.html next slide must be page2.html and previous page3.html)

here is code (it doesn't work):

<script type="text/javascript">  
    $(document).ready(function(){  
        $('#prevslide').click(function(){  

//var slideisnow = 0;
if (slideisnow<0)
{
    var slideisnow = 3;
}
elseif(slidesnow>=3)
{
    var slideisnow = 3;
}

        slideisnow = slideisnow - 1;
            $.ajax({  
                url: "page" + slideisnow + ".html",  
                cache: false,  
                success: function(html){开发者_Python百科  
                    $("#content").html(html);  
                }  
            });  
        });  

        $('#nextslide').click(function(){  

//var slideisnow = 0;
if (slideisnow>3)
{
    var slideisnow = 1;
}
elseif(slidesnow<=3)
{
    var slideisnow = 0;
}

        slideisnow = slideisnow + 1;
            $.ajax({  
                url: "page" + slideisnow + ".html",  
                cache: false,  
                success: function(html){  
                    $("#content").html(html);  
                }  
            });  
        });  

    });  
</script>  

May be this solution would help you:

This script uses jQuery to manipulate associated data-attribute for #content DIV.

 $(document).ready(function() {
     $('#prevslide').click(function() {
         var slideisnow = $("#content").data('slideisnow');
         if(slideisnow === undefined) {
             slideisnow = 3; //By default we show page3.html
         }
         // If page is first, then
         else if (slideisnow <= 1) { 
             slideisnow = 3; // return to last page
         }
         else if(slideisnow > 3) {
             slideisnow = 2;
         }
         // Normal pages just decrement its number
         else {
             slideisnow = slideisnow - 1;
         }
         $("#content").data('slideisnow', slideisnow);
         $.ajax({
             url: "page" + slideisnow + ".html",
             cache: false,
             success: function(html) {
                 $("#content").html(html);
             }
         });
     });

     $('#nextslide').click(function() {
         var slideisnow = $("#content").data('slideisnow');
         if(slideisnow === undefined) {
             slideisnow = 1; //By default we show page1.html
         }
         else if (slideisnow >= 3) {
             slideisnow = 1;
         }
         else if(slideisnow < 1) {
             slideisnow = 2;
         }
         else {
             slideisnow = slideisnow + 1;
         }

         $("#content").data('slideisnow', slideisnow);
         $.ajax({
             url: "page" + slideisnow + ".html",
             cache: false,
             success: function(html) {
                 $("#content").html(html);
             }
         });
     });

 });

why not to use a slider plugin, there is a ton of plugins to slide your content out there

check this out:

http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

http://webdesignfan.com/jquery-slider-tutorials-and-plugins/

http://www.designyourway.net/blog/resources/28-useful-jquery-sliders-you-need-to-download/

http://www.themeflash.com/30-stunning-jquery-slider-plugins-and-tutorials-to-boost-your-work/

1. why are you using $.ajax? shouldn't you just be using window.location? (or some slideshow plugin)
2. why not use a simple line of code like " currentSlide = ++currentSlide % 3;"?

The two lines that have this are probably what's causing a problem:

elseif(slidesnow>=3) 

elseif is not valid JavaScript; it should be else if. slidesnow should be slideisnow (you were missing an "i").

else if(slideisnow>=3)

See Mohammed's answer for a good 3rd party solution. For your jQuery, aren't you looking to do something more like:

// Next
slideisnow = (slideisnow+1) % 3;
...
// Prev
slideisnow = (slideisnow-1) % 3;

This perhaps? Please note the one-liners and my attempt on providing a singleton that hides the counter

<script type="text/javascript">  
$(document).ready(function(){  
  $('#prevslide').click(function(){   
    getSlide(slideCounter.addCounter(-1));
  });  
  $('#nextslide').click(function(){    
    getSlide(slideCounter.addCounter(+1));
  };
});
function getSlide(slideisnow) {
  $.ajax({
    url: "page" + slideisnow + ".html",  
    cache: false,  
    success: function(html){  
      $("#content").html(html);  
    }  
  });
}
var  slideCounter = (function () {
  var currentCounter = 0;
  var maxCounter = slides.length-1; // you need to change this
  return {
    getCounter: function () {return currentCounter;},
    addCounter: function (direction) {
      currentCounter+=direction;
      if (currentCounter<0) currentCounter=maxCounter; 
      else if (currentCounter>maxCounter) currentCounter=0; 
      return currentCounter; 
    }
  };
}());

</script>