Wie kann ich dieses Karussell so einstellen, dass es nur anhält, wenn der Benutzer eine der Boxen überfährt?

Question

Ich versuche diesen vorgefertigten Code zu ändern, so dass es für meine Website-Idee funktioniert. Ich frage mich, wie die "Pause" -Funktion nur ausgelöst werden kann, wenn der Benutzer über einen der li Artikel mauset; Andernfalls würde das Karussell für immer eine Schleife bilden.

Wie könnte dies erreicht werden? Ich googelte und versuchte Dinge wie:

if ($('#element:hover').length != 0) { 
    pause(); 
} 

, aber das ist nicht mit dem Code konform. Kann ich Hilfe erhalten? Vielen Dank.

https://jsfiddle.net/lovromar/Z4VpZ/

HTML

<div id="carousel-container"> 
    <div id="carousel-inner"> 
     <ul id="carousel-ul"> 
      <li>1</li> 
      <li>2</li> 
      <li>3</li> 
      <li>4</li> 
      <li>5</li> 
      <li>6</li> 
      <li>7</li> 
      <li>8</li> 
      <li>9</li> 
      <li>10</li>     
     </ul> 
    </div> 
</div> 

CSS

#carousel-container { 
    width: 680px; 
    margin: 2em auto; 
    position: relative; 
    border: 1px solid #ccc; 
    overflow: hidden; 
    height: 250px; 
} 

#carousel-inner { 
    width: 680px; 
    float: left; 
    position: relative; 
    overflow: hidden; 
} 

#carousel-ul { 
    position:relative; 
    left:-160px; 
    list-style-type: none; 
    margin: 0px; 
    padding: 0px; 
    width:9999px; 
    padding-bottom:50px; 
} 

#carousel-ul li{ 
    float: left;          
    width: 150px; 
    padding:0px; 
    height:186px; 
    margin: 50px 15px 0 15px; 
    position: relative; 
    background: #c0c0c0; 
    line-height: 186px; 
    font-size: 2em; 
    text-align: center; 
} 

JS

var Carousel = new 
function() { 

    var wrapper = document.getElementById('carousel-container'), 
     timer = null; 

    var start = function() { 

     doCarousel(); 
    }; 



    var sliding = function() { 



     var item_width = $('#carousel-ul li').outerWidth() + 10; 


     var left_indent = parseInt($('#carousel-ul').css('left')) - item_width; 


     $('#carousel-ul:not(:animated)').animate({ 
      'left': left_indent 
     }, 2000, 'linear', function() { 


      $('#carousel-ul li:last').after($('#carousel-ul li:first')); 


      $('#carousel-ul').css({ 
       'left': '-160px' 
      }); 
     }); 




    }; 

    var doCarousel = function() { 

     timer = setInterval(sliding, 2000); 


    }; 

    var pause = function() { 

     clearInterval(timer); 
     timer = null; 


    }; 

    var resume = function() { 

     doCarousel(); 


    }; 

    this.init = function() { 

     start(); 


    }; 


}(); 

$(function() { 

    Carousel.init(); 

}); 

Answer 1

Ich habe es funktioniert.

ich die Art und Weise geändert Sie Ihr Objekt deklarieren und es funktioniert, dass wie:

var Carousel = { 
    timer :null, 
    wrapper: null, 
    init : function() 
    { 
     var self = this; 
    this.timer = setInterval(function(){self.sliding();}, 2000); 
    }, 
    sliding : function() { 
     var item_width = $('#carousel-ul li').outerWidth() + 10; 
     var left_indent = parseInt($('#carousel-ul').css('left')) - item_width; 
     $('#carousel-ul:not(:animated)').animate({ 
      'left': left_indent 
     }, 2000, 'linear', function() { 


      $('#carousel-ul li:last').after($('#carousel-ul li:first')); 


      $('#carousel-ul').css({ 
       'left': '-160px' 
      }); 
     })}, 
     pause : function() { 
     clearInterval(this.timer); 

     this.timer = null; 


    }, 
    resume : function() { 
     this.init(); 
    }, 

}; 

$(function() { 
    alert("init"); 
    Carousel.init(); 
    $('#carousel-ul li').mouseover(function(){ 
    //clearInterval(timer); 
    //timer = null; 
    //pause(); 
    Carousel.pause(); 
}); 
$('#carousel-ul li').mouseout(function(){ 
    //clearInterval(timer); 
    //timer = null; 
    //pause(); 
    Carousel.resume(); 
}); 



}); 

Hier ist Ihre Jsfiddle: https://jsfiddle.net/Z4VpZ/4/

Normalerweise vermeide ich Funktion Javascript Klassen zu erklären, ich nutzen js Objekt {}, oder ich verwende die ECMASCRIPT 6 class statement.

Answer 2

Versuchen Sie so etwas?

$("#carousel-ul li").mouseover(function(){ Carousel.pause();});