If you have any questions or have better comments or suggestions, you can leave a message at the end of the page. Thank you very much.
The specific code is as follows:
Copy codeThe Code is as follows:
<! Doctype html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> image rotation effect </title>
<Style type = "text/css">
Body, div {margin: 0; paading: 0; font-size: 12px ;}
Ul, li {margin: 0; padding: 0; list-style: none ;}
. Clear {clear: both; width: 1px; height: 0px; line-height: 0px; font-size: 1px ;}
. Left {float: left ;}
. Right {float: right ;}
Ul, li {margin: 0; padding: 0; list-style: none ;}
. Box {width: 960px; margin: 0 auto; padding-top: 15px ;}
. Flash {position: relative; width: 360px; height: 280px; overflow: hidden ;}
. List {position: relative; width: 360px; height: 260px; overflow: hidden ;}
. List li img {position: absolute; left: 0; top: 0; width: 360px; height: 260px ;}
. List li {display: none ;}
. List. over {display: block ;}
. Btn {position: absolute; top: 233px; width: 360px; height: 26px; background: #000; line-height: 26px; opacity: 0.7; filter: alpha (opacity = 70); text-align: right ;}
. Btn a {padding: 2px 5px; margin: 0 2px; border: 1px solid # fff; border-radius: 2px; background: #000; color: # fff; text-decoration: none; cursor: pointer ;}
. Btn. over {background: # f00 ;}
. Btn2 {position: absolute; top: 206px; height: 62px ;}
. Btn2 img {width: 70px; height: 60px; border: 1px solid # ccc ;}
. Btn2. over img {border: 1px solid # f00 ;}
. Flash2 {position: relative; width: 800px ;}
. Flash2. list {float: left ;}
. Flash2. btn2 {float: left; position: static; width: 150px; height: 280px ;}
. Flash2. btn2 img {width: 120px; height: 47px ;}
</Style>
<Script type = "text/javascript" src = "jquery-1.6.1.min.js"> </script>
<Script type = "text/javascript" src = "scroll. js">
Var autoPlay = {
SetTimeShow: function (showObj, btnObj, showClass, timer ){
Var length = btnObj. length;
Var timeId = null;
Var index = 0;
If (showObj. length = btnObj. length ){
TimeId = window. setInterval (function (){
Index = autoPlay. showCon (showObj, btnObj, showClass, index); // return the index after the operation
}, Timer );
} Else if (length = 1 ){
ClearInterval (timeId); // if there is only one image, the timer is cleared and automatic playback is stopped.
} Else {
Return false;
}
// Click the operation.
BtnObj. each (function (I ){
$ (This). click (function (){
$ (This). addClass (showClass );
BtnObj. not ($ (this). removeClass (showClass );
ShowObj. eq (I). show ('low ');
ShowObj. not (showObj. eq (I). hide ();
Index = I;
});
});
},
// Automatic rotation display
ShowCon: function (show, btnObj, showClass, index ){
BtnObj. eq (index). addClass (showClass );
BtnObj. not (btnObj. eq (index). removeClass (showClass );
Show. eq (index). show ('low ');
Show. not (show. eq (index). hide ();
If (index> = btnObj. length-1 ){
Index = 0;
} Else {
Index ++;
}
Return index; // return the index after the operation
},
};
</Script>
<Script type = "text/javascript">
$ (Document). ready (function (){
AutoPlay. setTimeShow ($ ('# list1 li'), $ ('# btn1 a'), 'over', 3000 );
AutoPlay. setTimeShow ($ ('# list2 li'), $ ('# btn2 A'), 'over', 3000 );
AutoPlay. setTimeShow ($ ('# list3 li'), $ ('# btn3 A'), 'over', 3000 );
});
</Script>
</Head>
<Body>
<Div class = "box">
<Div class = "flash">
<Ul class = "list" id = 'list1'>
<Li class = "over"> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<Div class = "btn" id = "btn1">
<A class = "over" href = "#"> 1 </a> <a href = "#"> 2 </a> <a href = "#"> 3 </a> <a href = "#"> 4 </a> <a href = "#"> 5 </a>
</Div>
</Div>
</Div>
<Div class = "box">
<Div class = "flash">
<Ul class = "list" id = 'list2'>
<Li class = "over"> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<Div class = "btn2" id = "btn2">
<A class = "over" href = "#"> </a> <a href =" # "> </a> <a href = "#"> </a> <a href =" # "> </a> <a href =" # "> </a>
</Div>
</Div>
</Div>
<Div class = "box">
<Div class = "flash2">
<Ul class = "list" id = 'list3'>
<Li class = "over"> </li>
<Li> </li>
<Li> </li>
<Li> </li>
<Li> </li>
</Ul>
<Div class = "btn2" id = "btn3">
<A class = "over" href = "#"> </a> <a href =" # "> </a> <a href = "#"> </a> <a href =" # "> </a> <a href =" # "> </a>
</Div>
</Div>
</Div>
</Body>
</Html>