在这段代码中,我正在制作一个带有数据的框,这些数据一个接一个地显示两个 li 框,但我希望它在鼠标进入它时停止,并在鼠标离开时计数。
演示
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) Testimonial ticker goest here,
showing all testimonials one by one.
Testimonial ticker goest here, showing
all testimonials one by one. Testimonial ticker
goest here, showing all testimonials one by one
</li>
<li class="fader">2) Testimonial ticker goest here,
showing all testimonials one by one<br />
Testimonial ticker goest here, showing
all testimonials one by one<br />
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