jQueryとjavascriptを使用して画像スライダーを開発する

以下は、私がスクロールして希望の画像を得るための3つの関数を開発していて、画像を移動する "前"と "次の" divを持っています。それは動作させていない何か間違っている必要があります。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要素の前に存在しないため、HTML要素も、$("document").ready後でなければならないの取得すべき構文エラーがあります。

それは私の作品：

$("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を私が新しいと思ったので、私はそれについて知りませんでした。それのために微妙です – learner

jQueryとjavascriptを使用して画像スライダーを開発する

答えて

関連する問題