To discard other effects, the simplest carousel has only one statement:
Parent. appendChild (parent. firstChild) constantly adds an element in the list to the last one. appendChild removes the node from the original position, so the switchover effect can be achieved.
One point is that IE is different from other browsers in terms of text nodes. When obtaining child nodes, pay attention to the children attribute in different versions of FF.
The following demo does not set # view overflow: hidden.
Demo_1:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Ul {list-style: none ;}
# View {position: relative; width: 320px; height: 120px; margin-left: 320px; border: 10px solid # bc8f8f ;}
# View: after {content: '.'; display: block; clear: both; height: 0; visibility: hidden ;}
# Img_list {position: absolute; width: 960px ;}
# Img_list li {float: left; width: 320px; height: 120px ;}
# A {background: #87 ceeb ;}
# B {background: # ff69b4 ;}
# C {background: #98fb98 ;}
</Style>
</Head>
<Body>
<Div id = "view">
<Ul id = "img_list">
<Li id = "a"> </li>
<Li id = "B"> </li>
<Li id = "c"> </li>
</Ul>
</Div>
<Script type = "text/javascript">
Var img_list = document. getElementById ('img _ list ');
SetInterval (function (){
Img_list.appendChild (img_list.firstChild );
}, 500)
</Script>
</Body>
</Html>
(The demo above does not actually need to be floating. It is only for later demonstration)
Another way is to move the entire list to a certain direction without changing the node sequence (changing the left attribute of the list ),
Demo_2:
Copy codeThe Code is as follows:
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Ul {list-style: none ;}
# View {position: relative; width: 320px; height: 120px; margin-left: 320px; border: 10px solid # bc8f8f ;}
# View: after {content: '.'; display: block; clear: both; height: 0; visibility: hidden ;}
# Img_list {position: absolute; width: 960px ;}
# Img_list li {float: left; width: 320px; height: 120px ;}
# A {background: #87 ceeb ;}
# B {background: # ff69b4 ;}
# C {background: #98fb98 ;}
</Style>
</Head>
<Body>
<Div id = "view">
<Ul id = "img_list">
<Li id = "a"> </li>
<Li id = "B"> </li>
<Li id = "c"> </li>
</Ul>
</Div>
<Script type = "text/javascript">
Var img_list = document. getElementById ('img _ list ');
Img_list.style.left = 0;
SetInterval (function (){
Img_list.style.left = parseInt (img_list.style.left) =-640? 0: (parseInt (img_list.style.left)-320 + 'px ');
}, 500)
</Script>
</Body>
</Html>
The demo above is abrupt and does not feel good, so you can add a smooth moving effect.
The so-called smooth moving effect is actually to break down every stride of the second demo above into several small parts and divide a moving 320px into 50 for execution;
Demo_3:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Ul {list-style: none ;}
# View {position: relative; width: 320px; height: 120px; margin-left: 320px; border: 10px solid # bc8f8f ;}
# View: after {content: '.'; display: block; clear: both; height: 0; visibility: hidden ;}
# Img_list {position: absolute; width: 960px ;}
# Img_list li {float: left; width: 320px; height: 120px ;}
# A {background: #87 ceeb ;}
# B {background: # ff69b4 ;}
# C {background: #98fb98 ;}
</Style>
</Head>
<Body>
<Div id = "view">
<Ul id = "img_list">
<Li id = "a"> </li>
<Li id = "B"> </li>
<Li id = "c"> </li>
</Ul>
</Div>
<Script type = "text/javascript">
Var img_list = document. getElementById ('img _ list ');
Img_list.style.left = 0;
SetInterval (function (){
For (var I = 0; I <100; I ++ ){
(Function (pos ){
SetTimeout (function (){
Img_list.style.left = parseInt (img_list.style.left) =-640? 0:-pos/100*640 + 'px ';
}, (Pos + 1) * 10)
}) (I)
}
}, 1500)
</Script>
</Body>
</Html>
For demo_1, We can continuously reduce the firstChild width to achieve the effect similar to demo_3.
Demo_4
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Ul {list-style: none ;}
# View {position: relative; width: 320px; height: 120px; margin-left: 320px; border: 10px solid # bc8f8f ;}
# View: after {content: '.'; display: block; clear: both; height: 0; visibility: hidden ;}
# Img_list {position: absolute; width: 960px ;}
# Img_list li {float: left; width: 320px; height: 120px ;}
# A {background: #87 ceeb ;}
# B {background: # ff69b4 ;}
# C {background: #98fb98 ;}
</Style>
</Head>
<Body>
<Div id = "view">
<Ul id = "img_list">
<Li id = "a"> </li>
<Li id = "B"> </li>
<Li id = "c"> </li>
</Ul>
</Div>
<Script type = "text/javascript">
Var img_list = document. getElementById ('img _ list ');
SetInterval (function (){
Var current = img_list.children [0];
For (var I = 0; I <100; I ++ ){
(Function (pos ){
SetTimeout (function (){
Current. style. width = 320-(pos/100) * 320 + 'px ';
}, (Pos + 1) * 10)
}) (I)
}
SetTimeout (function (){
Img_list.appendChild (current );
Current. style. width = '320px ';
},1010 );
}, 1500)
</Script>
</Body>
</Html>
In the above several ways, the principles are almost the same. In addition, you can set a transparent gradient so that the transparency of an image ranges from 1 country to 0, so the switching effect can also be generated, and the code changes are very small.
Demo_5:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
* {Margin: 0; padding: 0 ;}
Ul {list-style: none ;}
# View {position: relative; width: 320px; height: 120px; margin-left: 320px; border: 10px solid # bc8f8f ;}
# View: after {content: '.'; display: block; clear: both; height: 0; visibility: hidden ;}
# Img_list {position: absolute; width: 960px ;}
# Img_list li {position: absolute; top: 0; left: 0; width: 320px; height: 120px ;}
# A {background: #87 ceeb ;}
# B {background: # ff69b4 ;}
# C {background: #98fb98 ;}
</Style>
</Head>
<Body>
<Div id = "view">
<Ul id = "img_list">
<Li id = "a"> </li>
<Li id = "B"> </li>
<Li id = "c"> </li>
</Ul>
</Div>
<Script type = "text/javascript">
Var img_list = document. getElementById ('img _ list ');
SetInterval (function (){
Var current = img_list.children [0];
For (var I = 0; I <100; I ++ ){
(Function (pos ){
SetTimeout (function (){
Current. style. opacity = 1-(pos/100) * 1;
}, (Pos + 1) * 10)
}) (I)
}
SetTimeout (function (){
Img_list.appendChild (current );
Current. style. opacity = 1;
},1010 );
}, 1500)
</Script>
</Body>
</Html>
As for other brilliant effects, you can use some other combinations.
One way is to divide the image into n regions, set the background to the image to be displayed, and then display the corresponding background in different regions. In this way, a 100*100 image can be divided into 100 10*10 small blocks, and then processed to obtain more results. In theory, it can also be divided into 10000 1*1 small dots, but the browser will crash ··
Demo_6:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
* {Margin: 0; padding: 0; border: 0 ;}
Body {padding: 50px ;}
. Sep {float: left; margin: 1px 1px 0 0 ;}
</Style>
</Head>
<Body>
<Div id = "wrap" style = "position: relative;"> </div>
<Script type = "text/javascript">
Var img = document. getElementById ('img ');
Var wrap = document. getElementById ('wrapp ');
Img. onload = function (){
Console. dir (img );
Var h = img. naturalHeight;
Var w = img. naturalWidth;
NewPanel (w, h );
}
Function newPanel (w, h ){
Var cols = 10;
Var rows = 10;
Var colWidth = Math. floor (w/cols );
Var rowHeight = Math. floor (w/rows );
For (var row = 0; row <rows; row ++ ){
For (var col = 0; col <cols; col ++ ){
Var div = document. createElement ('div ');
Div. style. width = colWidth + 'px ';
Div. style. height = rowHeight + 'px ';
Div. className = 'sept ';
Div. style. backgroundImage = 'url ('+ img. src + ')';
Div. style. backgroundPosition =-colWidth * col + 'px '+-rowHeight * row + 'px ';
Wrap. appendChild (div );
}
}
}
SetTimeout (function (){
SetInterval (function (){
Wrap. lastChild & wrap. removeChild (wrap. lastChild );
}, 50)
}, 1000)
</Script>
</Body>
</Html>
Demonstration only. The specific width and arrangement need to be organized by yourself. It can also be eliminated or masked, which corresponds to different arrangement and combinations. Other methods are also better implemented.
Finally, we all know that CSS3 can also achieve some slide effects,
Demo_7:
Copy codeThe Code is as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN"
Http://www.w3.org/TR/html4/loose.dtd>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/css">
*{
Margin: 0;
Padding: 0;
}
# Test {
Position: relative;
Width: 300px;
Height: 200px;
Overflow: hidden;
Border: 1px solid # d4d4d4;
}
# Test ul {
Position: absolute;
Top: 0;
Left: 0;
Height: 200px;
}
# Test ul li {
Float: left;
Width: 300px;
Height: 200px;
}
@-Webkit-keyframes myAnimation {
0% {
Top: 0;
}
40% {
Top:-200px;
}
70% {
Top:-400px;
}
100% {
Top:-600px;
}
}
# Test ul {
-Webkit-animation-name: myAnimation;
-Webkit-animation-duration: 4 s;
-Webkit-animation-timing-function: linear;
-Webkit-animation-iteration-count: infinite;
}
</Style>
</Head>
<Body>
<Div id = "test">
<Ul>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
</Div>
</Body>
</Html>
There are many examples on the Internet, which will be added later.
