将滑块中的图像左右移动的问题

我编写了一个内容滑块代码，在正确点击后，我可以将内容从右向左滑动。将滑块中的图像左右移动的问题

但是，如果必须将内容从左向右滑动，那么在从左向右滑动后，只需单击一下鼠标左键就可以第一次单击左箭头按钮。

此外，一旦我开始将内容从左向右滑动，如果必须从右向左滑动内容，我必须首次双击右箭头按钮两次。

以下是代码。

<head> 
    <title></title> 
</head> 
<link rel="stylesheet" type="text/css" href="css/style.css" /> 
<script type="text/javascript" src="js/jquery-1.8.1.min.js"> 

</script> 
<script type="text/javascript" src="js/jquery.easing.1.3.js"> 

</script> 
<!--script type="text/javascript" src="js/slidR.js"> </script--> 

<body> 
    <div id="sliderBlock"> 
     <div id="slide1" class="slide"> 
      <img src="img/nmo.jpg" /> 
     </div> 
     <div id="slide2" class="slide"> 
      <img src="img/tys.jpg" /> 
     </div> 
     <div id="slide3" class="slide"> 
      <img src="img/ups.jpg" /> 
     </div> 
     <div id="slide4" class="slide"> 
      <img src="img/we.jpg" /> 
     </div> 
    </div> 
</body> 
<script> 
    $(function() { 
     var count = $("#sliderBlock").children().length; 
     var slideWidth = $(".slide").outerWidth(); 
     var slideHeight = $(".slide").outerHeight(); 
     var totalWidth = count * slideWidth; 
     var easeFn = "swing"; 
     var fs = 1; 
     var ls = count; 
     var currentSlide; 
     $("#sliderBlock").append("<div id='next'></div>") 
     $("#sliderBlock").append("<div id='prev'></div>") 
     $(".slide").wrapAll('<div id="allSlides">'); 
     $("#allSlides").css({ 
      "width": totalWidth, 
      "height": slideHeight 
     }); 
     $("#sliderBlock").append("<ul id='pagination'>"); 
     for (i = 1; i <= count; i++) { 
      $("#pagination").append("<li><a id='slide" + i + "'>" + i + "</a></li>") 
     } 
     $("#pagination li a#slide1").addClass("liveSlide"); 
     var interval = 3000; 
     var timeInterval = setInterval(function() { 
      slidR() 
     }, interval); 
     $("#prev").on("click", slidR_L) 
     $("#next").on("click", slidR_R) 

     function slidR() { 

      // slidR_R(); 
      // slidR_L(); 

     } 
     var curSlide, curSlideNo, prevSlideNo, divReOrder; 
     divReOrder = 1; 

     function slidR_R() { 

      $("#allSlides").animate({ 
       left: -slideWidth 
      }, 1000, function() { 
       $(".slide:first-child").clone().appendTo("#allSlides"); 
       $(".slide:first-child").detach(); 
       $("#allSlides").css('left', "0px"); 
      }); 

     } 

     function slidR_L() { 

      $("#allSlides").animate({ 
       left: "0" 
      }, 1000, function() { 

       $(".slide:last-child").clone().prependTo("#allSlides"); 
       $(".slide:last-child").detach(); 
       $("#allSlides").css('left', -slideWidth); 
      }); 

     } 
    }); 
</script>

来源

2013-01-09 user1964217

你得到任何错误在浏览器控制台，当你点击一个或下一个按钮？ –

@pjp没有错误，当我点击右键或左键 – user1964217

试着用这一个，看看是否可以帮助：

<script> 

     function slidR_R() { 
      $("#allSlides").animate({ 
       left: -slideWidth 
      }, 1000, function() { 
       $(".slide:first-child").clone().appendTo("#allSlides"); 
       $(".slide:first-child").detach(); 
       $("#allSlides").css('left', "0px"); 
      }); 
     } 

     function slidR_L() { 
      $("#allSlides").animate({ 
       left: "0" 
      }, 1000, function() { 

       $(".slide:last-child").clone().prependTo("#allSlides"); 
       $(".slide:last-child").detach(); 
       $("#allSlides").css('left', -slideWidth); 
      }); 
     } 
    $(function() { 
     var count = $("#sliderBlock").children().length; 
     var slideWidth = $(".slide").outerWidth(); 
     var slideHeight = $(".slide").outerHeight(); 
     var totalWidth = count * slideWidth; 
     var easeFn = "swing"; 
     var fs = 1; 
     var ls = count; 
     var currentSlide; 
     $("#sliderBlock").append("<div id='next'></div>") 
     $("#sliderBlock").append("<div id='prev'></div>") 
     $(".slide").wrapAll('<div id="allSlides">'); 
     $("#allSlides").css({ 
      "width": totalWidth, 
      "height": slideHeight 
     }); 
     $("#sliderBlock").append("<ul id='pagination'>"); 
     for (i = 1; i <= count; i++) { 
      $("#pagination").append("<li><a id='slide" + i + "'>" + i + "</a></li>") 
     } 
     $("#pagination li a#slide1").addClass("liveSlide"); 
     var interval = 3000; 
     var timeInterval = setInterval(function() { 
      slidR() 
     }, interval); 
     $("#sliderBlock").on("click", "#prev", slidR_L); 
     $("#sliderBlock").on("click", "#next", slidR_R); 

     var curSlide, curSlideNo, prevSlideNo, divReOrder; 
     divReOrder = 1; 


    }); 
</script>

来源

2013-01-09 18:40:35 Jai

它没有解决这个问题。事实上，滑块没有工作。 – user1964217

将滑块中的图像左右移动的问题

回答

相关问题