Question

有3张幻灯片（page1.html，page2.html，page3.html）和2个ID为prevslide和nextslide的按钮。目标是在用户单击其中一个按钮时显示下一张或上一张幻灯片。主要问题是将slideisnow变量的值与下一个或上一张幻灯片完全相同。（例如，如果现在是幻灯片page1.html，则下一张幻灯片必须为page2.html，之前为page3.html）这是代码（它不起作用）：

<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){  
                    $("#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>

Answer 1

为什么不使用滑块插件，有大量的插件可以将你的内容滑出那里

检查一下：

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/

Answer 2

你为什么要使用$ .ajax？你不应该只使用window.location吗？（或一些幻灯片插件）
为什么不使用像“currentSlide = ++ currentSlide％3;”这样简单的代码？

Answer 3

这两行有可能导致问题：

elseif(slidesnow>=3)

elseif无效的JavaScript;它应该是else if。 slidesnow应为slideisnow（您错过了“我”）。

else if(slideisnow>=3)

Answer 4

请参阅穆罕默德对第三方解决方案的回答。对于你的jQuery，你不想做更像的事情：

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

Answer 5

这可能呢？请注意单行和我尝试提供隐藏计数器的单身

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

Answer 6

可能这个解决方案可以帮到你：

此脚本使用jQuery操作#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);
             }
         });
     });

 });

if条件阻塞jquery函数

6 个答案: