開發使用jQuery和JavaScript

下面的圖像滑塊是我的代碼中，我已經開發了三大功能通過滾動來獲得所需的圖像，我有「上一頁」和「下一頁」的div移動images.It看起來不錯，但對我來說有必須是錯誤的，而不是讓它起作用。開發使用jQuery和JavaScript

<!DOCTYPE html> 
    <html> 
    <head><head> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

    <script type="text/javascript" > 

     var imageArr = document.getElementsByClassName('slide'); 
     var offset = imageArr.length-1; 
     var currentImage, prevImage, nextImage; 

     function getCurrentImage() { 
      currentImage = imageArr[offset]; 
     } 

     function getPrevImage() { 
      if(offset == 0) 
       offset = imageArr.length-1; 
      else 
       offset = offset-1; 

      prevImage = imageArr[offset]; 

     } 

     function getNextImage() { 
      if(offset == imageArr.length-1) 
       offset = 0; 
      else 
       offset = offset+1; 

      nextImage = imageArr[offset]; 

     } 

    $("document").ready(function(){ 

     $(".prev").click(function(){ 

      $(function(){ 
       getCurrentImage(); 
      }); 
      $(function(){ 
       getPrevImage(); 
      }); 


      $(currentImage).css({right:0px}); 
      $(prevImage).css({left:0px}); 

      $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'}); 
      $(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'}); 
     }); 

     $(".next").click(function(){ 
       $(function(){ 
        getCurrentImage(); 
       }); 
       $(function(){ 
        getNextImage(); 
       }); 


      $(currentImage).css({right:0}); 
      $(nextImage).css({left:0px}); 

      $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'}); 
      $(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'}); 
     }); 

    }); 


    </script> 

    <style> 
     .container { 
      width : 90%; 
      margin-left: 5%; 
      margin-right: 5%; 
      height : 400px; 
      border : 2px solid black; 
      position: relative; 
     } 
     img { 
      width:100%; 
      height:400px; 
      position: absolute; 

     } 

     .prev, .next { 
      position :relative; 
      cursor : pointer; 
      width : 4%; 
      height: 70px; 
      border : 1px solid black; 
      margin-top: -250px; 
      font-size: 40px; 
      color:#fff; 
      padding-left:10px; 
      background: #000; 
      opacity: .5; 

     } 
     .next { 
      float:right; 
      margin-right: 0px; 

     } 
     .prev{ 
      float:left; 
      margin-left: 0px; 
     } 

     .prev:hover, .next:hover{ 
      opacity: 1; 
     } 
    </style> 
</head> 
<body> 


    <div class="container"> 
     <img src="slide1.jpg" class="slide" /> 
     <img src="slide2.jpg" class="slide" /> 
     <img src="slide3.jpg" class="slide" /> 
     <img src="slide4.jpg" class="slide" /> 
    </div> 



    <div class="prev" >&#10094;</div> 
    <div class="next" >&#10095;</div> 


</body> 
</html>

來源

2017-07-18 learner

你看到的開發人員工具的錯誤？例如這裏有一個語法錯誤==> $（prevImage）.css（{left：'0px'}）;它應該是一個字符串或數字 – karthick

你可能有興趣在已經存在一個jQuery插件做到這一點：http://jquery.malsup.com/cycle2/ – War10ck

@karthick感謝，我得到了錯誤並糾正。 – learner

你有語法錯誤在$().css({right: 0px});應$().css({right: '0px'});
獲得html元素也必須$("document").ready後，因爲之前不存在你的HTML元素。

它爲我的作品：

$("document").ready(function(){ 
    var imageArr = document.getElementsByClassName('slide'); 
    var offset = imageArr.length-1; 
    var currentImage, prevImage, nextImage; 

    function getCurrentImage() { 
     currentImage = imageArr[offset]; 
    } 

    function getPrevImage() { 
     if(offset == 0) 
      offset = imageArr.length-1; 
     else 
      offset = offset-1; 

     prevImage = imageArr[offset]; 

    } 

    function getNextImage() { 
     if(offset == imageArr.length-1) 
      offset = 0; 
     else 
      offset = offset+1; 

     nextImage = imageArr[offset]; 
    } 

    $(".prev").click(function(){ 

     $(function(){ 
      getCurrentImage(); 
     }); 
     $(function(){ 
      getPrevImage(); 
     }); 

     $(currentImage).css({right: '0px'}); 
     $(prevImage).css({left: '0px'}); 

     $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'}); 
     $(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'}); 
    }); 

    $(".next").click(function(){ 
      $(function(){ 
       getCurrentImage(); 
      }); 
      $(function(){ 
       getNextImage(); 
      }); 


     $(currentImage).css({right: '0px'}); 
     $(nextImage).css({left: '0px'}); 

     $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'}); 
     $(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'}); 
    }); 
});

來源

2017-07-18 21:00:41 yellowmint

感謝@yellowmint它的工作。 – learner

不客氣。請接受答案。 – yellowmint

我接受@yellowmint爲我新，所以我不知道it.sorry它 – learner

開發使用jQuery和JavaScript

回答

相關問題