Problem bei Bilder Slideshow JavaSCRIPT Basierend

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

      Problem bei Bilder Slideshow JavaSCRIPT Basierend

      Problem bei Bilder Slideshow JavaSCRIPT Basierend
      Nábend :)

      Wollte unsere Seite mit einer schönen Bilder-Slider-Show verschöner (ähnlich wie in cpg)
      Hab mir dazu ein Javascript im Internet gezogen. Leider funktioniert dieses nicht richtig...
      Am Anfang läufst schön sauber aber nach dem 1-2 Durchlauf flippt das Teil voll aus und macht im millisekunden takt die bilder da durch.

      Kenn mich leider bei Javascript 0 aus... Und habe kein anderes fertiges gefunden, vllt könnte ja einer von euch einfach mal drüber schauen und mir helfen :)
      Spoiler anzeigen

      Quellcode

      1. $(document).ready(function() {
      2. //Set Default State of each portfolio piece
      3. $(".paging").show();
      4. $(".paging a:first").addClass("active");
      5. //Get size of images, how many there are, then determin the size of the image reel.
      6. var imageWidth = $(".window").width();
      7. var imageSum = $(".image_reel img").size();
      8. var imageReelWidth = imageWidth * imageSum;
      9. //Adjust the image reel to its new size
      10. $(".image_reel").css({'width' : imageReelWidth});
      11. //Paging + Slider Function
      12. rotate = function(){
      13. var triggerID = $active.attr("rel") - 1; //Get number of times to slide
      14. var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
      15. $(".paging a").removeClass('active'); //Remove all active class
      16. $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
      17. //Slider Animation
      18. $(".image_reel").animate({
      19. left: -image_reelPosition
      20. }, 500 );
      21. };
      22. //Rotation + Timing Event
      23. rotateSwitch = function(){
      24. play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
      25. $active = $('.paging a.active').next();
      26. if ( $active.length === 0) { //If paging reaches the end...
      27. $active = $('.paging a:first'); //go back to first
      28. }
      29. rotate(); //Trigger the paging and slider function
      30. }, 7000000); //Timer speed in milliseconds (3 seconds)
      31. };
      32. rotateSwitch(); //Run function on launch
      33. //On Hover
      34. $(".image_reel a").hover(function() {
      35. clearInterval(play); //Stop the rotation
      36. }, function() {
      37. rotateSwitch(); //Resume rotation
      38. });
      39. //On Click
      40. $(".paging a").click(function() {
      41. $active = $(this); //Activate the clicked paging
      42. //Reset Timer
      43. clearInterval(play); //Stop the rotation
      44. rotate(); //Trigger rotation immediately
      45. rotateSwitch(); // Resume rotation
      46. return false; //Prevent browser jump to link anchor
      47. });
      48. });
      Alles anzeigen
      ]
      MfG GodHateMe
      8 Jahre bei der Besten Community

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von GodHateMe ()

      Hab mal was ge"fiddle'ed (shit was ein Wort :D)

      Dauerte ein bissel bis ich die richtige HTML-Combo hatte ... aber dein JS geht. Jediglich dein Delay (Z:38) von 7000000ms (=7000 Sek) is ein bissel ... hoch?
      jsfiddle.net/wHrM2/

      ( Die Bilder sind von meiner ehm. Webseite, wer die klaut is doof :P )

      Edit: imgur mag wohl kein Hotlinking ... hab mal die Bilder gefixt ...
      Edit2: Ich habs jetzt eine Stunde laufen und es tut was es soll ...

      Gruß
      florian0

      Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von florian0 ()