Special effects of left and right carousel Images Written by jquery
A left and right carousel image written using jquery can be seen by replacing the link of the jquery framework with the image. For more information, see
Recently, I am not very busy. I wrote a slideshow image in my exercise. Although the effects and functions seem to be okay, I think there are many things to be improved, I still have a long way to go in the front-end position. Of course, there are still many things to learn. Here I only want to write a record of my recent research on js. I believe it will be better in the future.
Replace the link and image of the jquery framework to see the effect.
The source code is as follows:
The 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 xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> slideshow </title>
<Style>
* {Margin: 0; padding: 0 ;}
Body {min-width: 320px; font-size: 12px ;}
H1 {font-size: 18px ;}
H2 {font-size: 14px}
H4 {font-size: 12px ;}
P {word-break: break-all; line-height: 24px ;}
Ul, ul li, ol, ol li {list-style: none ;}
A {text-decoration: none ;}
. Clear {clear: both ;}
. Clearfix: after {display: block; clear: both; content: "."; visibility: hidden; height: 0px ;}
# Pic_carousel {position: relative; width: 1000px; height: 350px; overflow: hidden; margin: 0 auto; text-align: center ;}
. Lunbo_pic {position: absolute; left: 0; top: 0; overflow: hidden; text-align: center ;}
. Lunbo_pic li {float: left; overflow: hidden ;}
. Lunbo_pic li a img {width: 1000px; display: block; vertical-align: bottom; border: none ;}
. Lunbo_curso {position: absolute; left: 50%; width: 125px; margin-left:-64px; bottom: 0 ;}
. Lunbo_curso a {background: url (.. /images/will_yuan.png) no-repeat center; float: left; color: # 00F; width: 25px; cursor: pointer; height: 25px; line-height: 25px; display: block; text-align: center ;}
. Lunbo_curso. small_xz {color: # F0F ;}
. Arr {position: absolute; top: 50%; margin-top:-25px; width: 30px; height: 50px ;}
# Arr_l {left: 0; background: # CCC ;}
# Arr_r {right: 0; background: # CCC ;}
. Tc_kuan {position: absolute; top: 50%; left: 50%; margin-top:-25px; margin-left:-100px; width: 200px; height: 50px; line-height: 50px; background: # CCC; color: #000 ;}
</Style>
<Script type = "text/javascript" src = "jquery/jquery-1.8.3.min.js"> </script>
</Head>
<Body>
<Div id = "pic_carousel">
<Ul id = "lunbo_pic" class = "clearfix lunbo_pic">
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
<Li> <a href = "#"> </a> </li>
</Ul>
<Div id = "lunbo_curso" class = "lunbo_curso">
<A href = "#" class = "small_xz"> 1 </a>
<A href = "#"> 2 </a>
<A href = "#"> 3 </a>
<A href = "#"> 4 </a>
<A href = "#"> 5 </a>
</Div>
<Span id = "arr_l" class = "arr"> </span>
<Span id = "arr_r" class = "arr"> </span>
</Div>
<Script>
Var B _width = 1000; // The width of the big image
Var speed = 500; // move the image to the left
Var s_time = 3000 // automatic image scrolling speed
Var pic_li = $ ("# lunbo_pic"). children ("li ");
$ (Document). ready (function (e ){
Var $ ul_width = pic_li.width () * pic_li.length; // The width of the carousel image.
$ ("# Lunbo_pic"). width ($ ul_width );
Var small_width = $ (". lunbo_curso> a"). width () * $ (". lunbo_curso> a"). length;
$ (". Lunbo_curso"). width (small_width );
$ (". Lunbo_curso" ).css ("margin-left",-small_width/2 );
});
$ (Document). live ("click", function (e ){
$ Target = export (e.tar get );
Var id = $ target. attr ('id ');
If ($ target. is ("a") & $ target. parent ($ ("# lunbo_curso "))){
$ Target. addClass ("small_xz"). siblings (). removeClass ('small _ xz ');
Var mar_lf = parseInt ($ target. index () * B _width );
$ ("# Lunbo_pic"). animate ({
Left:-mar_lf
}, Speed );
}
If (id = "arr_l "){
PrePage ();
}
If (id = "arr_r "){
NextPage ();
}
});
// Previous
Function prePage (){
If ($ (". small_xz"). index () = 0 ){
$ ("# Lunbo_pic" ).css ("left",-4000 );
$ ("# Lunbo_pic"). animate ({
"Left":-parseInt (pic_li.length * B _width-B _width)
}, Speed );
$ ("# Lunbo_curso> a"). eq (pic_li.length-1). addClass ("small_xz"). siblings (). removeClass ("small_xz ");
$ (". Small_xz"). index () = pic_li.length-1;
} Else {
$ ("# Lunbo_curso> "). eq ($ (". small_xz "). index ()-1 ). addClass ("small_xz "). siblings (). removeClass ("small_xz ");
Var mar_lf2 = parseInt ($ ("# lunbo_pic" ).css ("left") + B _width;
$ ("# Lunbo_pic"). animate ({
"Left": mar_lf2
}, Speed );
}
}
// Next
Function nextPage (){
If ($ (". small_xz"). index () = pic_li.length-1 ){
$ ("# Lunbo_pic" ).css ("left", 0 );
/* $ ("# Lunbo_pic"). animate ({
"Left": 0
}, Speed );*/
$ ("# Lunbo_curso> a"). eq (0). addClass ("small_xz"). siblings (). removeClass ("small_xz ");
$ (". Small_xz"). index () = 0;
} Else {
$ ("# Lunbo_curso> "). eq ($ (". small_xz "). index () + 1 ). addClass ("small_xz "). siblings (). removeClass ("small_xz ");
Var mar_lf2 = parseInt ($ ("# lunbo_pic" ).css ("left")-B _width;
$ ("# Lunbo_pic"). animate ({
"Left": mar_lf2
}, Speed );
}
}
Function picRun (){
NextPage ();
}
IntervalTime = setInterval (picRun, s_time );
$ ("# Pic_carousel"). on ("mouseover", function (){
ClearInterval (intervalTime );
});
$ ("# Pic_carousel"). on ("mouseout", function (){
IntervalTime = setInterval (picRun, s_time );;
});
</Script>
</Body>
</Html>