Home > Web Front-end > JS Tutorial > jQuery flop or blinds effect (content automatically switches in three seconds)_jquery

jQuery flop or blinds effect (content automatically switches in three seconds)_jquery

WBOY
Release: 2016-05-16 17:52:46
Original
1433 people have browsed it

Core code:

Copy code The code is as follows:

$(function(){
var timer = true; //Perform up or down switch
var liindex = 0; //LI index
var $div = $(".byc").find("div");
//Convert the contents of LI every three seconds
var set1 = setInterval(function(){
ainbyc($div);
liindex = 0;
timer = !timer;
},3000);
//The way LI transforms, that is, every 100ms, let the next LI move the top value;
function ainbyc(ds){
var set2 = setInterval(function( ){
//After all LIs are moved, clear them
if(liindex == $div.length){
clearInterval(set2);
//Up
}else if( timer){
ds.eq(liindex).animate({"top":0},100);
//Down
}else{
ds.eq(liindex).animate ({"top":-25},100);
}
liindex ;
},100);
}
})

Wonderful Video It’s all analyzed very clearly. Just summarize it here.
1. Clear the timer clearInterval. I wrote it outside before, but it should be written inside setInterval.
2. When you are not sure what the value of Boolean is, you can write like this: timer = !timer;

Online demo: http://demo.jb51.net/js/2012/ mybyc/
Package download: http://www.jb51.net/jiaoben/55611.html
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template