Banner image carousel,
Html part version <script src = "http://www.jq22.com/jquery/jquery-1.10.2.js"> </script>
Certificate -----------------------------------------------------------------------------------------------------------------------------------------------
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Title> </title>
<Style>
* {Padding: 0; margin: 0; list-style: none ;}
/*************************************** *****/
. Banner {width: 1920px; height: 500px; overflow: hidden; position: relative; margin-left: auto; margin-right: auto ;}
. Banner. img {position: absolute; left: 0px; top: 0;}/* image style */
. Banner. img li {float: left;}/* image style */
. Banner. img {width: 550px ;}
/*/Small circle /*/
. Banner. num {position: absolute; width: 100%; bottom: 50px; left: 0; text-align: center; font-size: 0px ;;} /* bottom can adjust the height of a small circle */
. Banner. num li {width: 10px; height: 10px; background: #888; border-radius: 50%; display: inline-block; margin: 0 3px; cursor: pointer ;}
. Banner. num li. on {background: # F60 ;}
/*/Button /*/
. Banner. btn {width: 30px; height: 50px; background: rgba (0.5, 0, 50%); position: absolute; top:; margin-top:-25px; cursor: pointer; text-align: center; line-height: 50px; color: # fff; font-size: 40px; font-family: ""; display: none ;}
. Banner: hover. btn {display: block ;}
. Banner. btn_l {left: 0 ;}
. Banner. btn_r {right: 0 ;}
/* Modify the size of the output screen */
# Ban1. banner {width: 100% px; height: 600px; margin: 0 auto; border: 0px solid #000 ;}
# Ban1. banner. img {width: 1920px; height: 600px;/* modify the image size */
</Style>
</Head>
<Body>
<Script src = "http://www.jq22.com/jquery/jquery-1.10.2.js"> </script>
<Script src = "../gundongimages/js/gdlb. js"> </script>
<Div id = "ban1">
<Div class = "banner">
<Ul class = "img">
<Li> <a href = "#"> </A> </li>
<Li> <a href = "#"> </A> </li>/* fill in the image path based on your own image path */
</Ul>
<Ul class = "num"> <! -- Small circle -->
</Ul>
<Div class = "btn btn_l"> & lt; </div> <! -- Left button -->
<Div class = "btn btn_r"> & gt; </div> <! -- Right button -->
</Div>
</Div>
</Body>
</Html>
Bytes ----------------------------------------------------------------------------------------------------------------
Js Section
Bytes ----------------------------------------------------------------------------------------------
$ (Function (){
Imgscrool ('# ban1 ');
Imgscrool ('# ban2 ');
})
// This is a function
Function imgscrool (obj ){
Var moving = false;
Var width = $ (obj + ". banner. img"). width ();
Var I = 0;
Var clone = $ (obj + ". banner. img li"). first (). clone ();
$ (Obj + ". banner. img"). append (clone );
Var size = $ (obj + ". banner. img li"). size ();
For (var j = 0; j <size-1; j ++ ){
$ (Obj + ". banner. num"). append ("<li> </li> ");
}
$ (Obj + ". banner. num li"). first (). addClass ("on ");
/* Move the cursor to the dot */
If ($ (obj + ". banner. num li ")){
$ (Obj + ". banner. num li"). hover (function (){
Var index = $ (this). index ();
I = index;
$ (Obj + ". banner. img"). stop (). animate ({left:-index * width}, 1000)
$ (This). addClass ("on"). siblings (). removeClass ("on ")
})
};
// Handle the initial width of carousel
Var a2 = $ (obj + ". banner img"). width ();
Var a3 = $ (obj + ". img li"). length
$ (Obj + ". banner. img"). width (a2 * a3 + 'px ');
/* Automatic carousel */
Var t = setInterval (function (){
I ++;
Move ();
}, 2000)
/* Operations on the banner timer */
$ (Obj + ". banner"). hover (function (){
ClearInterval (t );
}, Function (){
T = setInterval (function (){
I ++;
Move ();
}, 2000)
})
If ($ (obj + ". banner. btn_l ")){
/* Left button */
$ (Obj + ". banner. btn_l"). stop (true). click (function (){
If (moving ){
Return;
};
Moving = true;
I --
Move ();
})
/* Right button */
$ (Obj + ". banner. btn_r"). stop (true). click (function (){
If (moving ){
Return;
}
Moving = true;
I ++
Move ()
})
};
Function move (){
If (I = size ){
$ (Obj + ". banner. img" ).css ({left: 0 })
I = 1;
}
// Modify the width of each carousel Screen
If (I =-1 ){
$ (Obj + ". banner. img" ).css ({left:-(size-1) * width })
I = size-2;
}
$ (Obj + ". banner. img"). stop (true). delay (200). animate ({left:-I * width}, 1000, function (){
Moving = false;
})
If (I = size-1 ){
$ (Obj + ". banner. num li"). eq (0). addClass ("on"). siblings (). removeClass ("on ")
} Else {
$ (Obj + ". banner. num li"). eq (I). addClass ("on"). siblings (). removeClass ("on ")
}
}
}