0

このコードでは、2つのボックスを次々に表示するデータを含むボックスを作成していますが、マウスがその上に入ると停止し、マウスが離れるとカウントします。

デモ

CSS :

ul.bxslider li{
width:77%;
margin: 50px 0 0 80px;
height:150px;
display:none;
text-align:left;
font-size: 20px;
font-weight:normal;
font-family: 'Playball', cursive;
}

HTML コード :

 <ul class="bxslider">
      <li class="fader">1)&nbsp;&nbsp;Testimonial ticker goest here,
               showing all testimonials one by one.
               &nbsp;&nbsp;&nbsp;&nbsp;Testimonial ticker goest here, showing
               all testimonials one by one.&nbsp;&nbsp;&nbsp;Testimonial ticker
               goest here, showing all testimonials one by one
     </li>
     <li class="fader">2)&nbsp;&nbsp;Testimonial ticker goest here,
            showing all testimonials one by one<br />
            &nbsp;&nbsp;&nbsp;&nbsp;Testimonial ticker goest here, showing
            all testimonials one by one<br />
            &nbsp;&nbsp;&nbsp;&nbsp;Testimonial ticker goest here, showing
            all testimonials one by one
    </li>

    </ul>

JavaScript コード:

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

        var fad = $('.fader');
        var counter = 0;
        var divs = $('.fader').hide(); // Selecting fader divs instead of each by name.
        var dur = 500;

        fad.children().filter('.fader').each(function(fad) {

            function animator(currentItem) {

                animator(fad.children(":first"));

                fad.mouseenter(function(){
                    $(".fader").stop(); 
                });
                fad.mouseleave(function(){
                    animator(fad.children(":first"));
                });
            };

        });

        function showDiv() {
            divs.fadeOut(dur) // hide all divs
                .filter(function(index) {
                    return index == counter % divs.length;
                }) // figure out correct div to show
                .delay(dur) // delay until fadeout is finished
                .fadeIn(dur); // and show it
            counter++;
        }; // function to loop through divs and show correct div

        showDiv(); // show first div    

        return setInterval(function() {  // return interval so we can stop the loop
            showDiv(); // show next div
        }, 2 * 1000); // do this every 5 seconds    
   });

// JavaScript Document
4

1 に答える 1