Entwickeln von Bild-Slider mit jQuery und Javascript

Unten ist mein Code in dem ich drei Funktionen entwickelt habe, um gewünschte Bild durch Scrollen zu bekommen und ich habe "prev" und "next" divs Bilder zu bewegen.Es sieht gut für mich aber da muss etwas falsch sein, was es nicht funktionieren lässt.Entwickeln von Bild-Slider mit jQuery und 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>

Quelle

2017-07-18 learner

Sie Fehler in Entwickler-Tools sehen Sie? zum Beispiel gibt es hier einen Syntaxfehler ==> $ (prevImage) .css ({left: '0px'}); Es sollte ein String oder eine Nummer sein – karthick

Sie könnten daran interessiert sein, ein jquery-Plugin, das bereits das tut: http://jquery.malsup.com/cycle2/ – War10ck

@karthick danke, ich habe die Fehler und korrigiert. – learner

Sie haben Syntaxfehler in $().css({right: 0px}); sollte von $().css({right: '0px'});
Erste HTML-Elemente müssen auch nach $("document").ready sein, weil Ihre HTML-Elemente vor nicht existieren.

Es funktioniert für mich:

$("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%'}); 
    }); 
});

Quelle

2017-07-18 21:00:41 yellowmint

Danke @yellowmint es hat funktioniert. – learner

Gern geschehen. Bitte akzeptiere die Antwort. – yellowmint

ich akzeptierte @yellowmint, da ich neu bin, also wusste ich nicht darüber. Sorry dafür – learner

Entwickeln von Bild-Slider mit jQuery und Javascript

Antwort

Verwandte Themen