A use of jquery written by the left and right carousel map, the jquery framework to replace the link with the picture can see the effect of the need for friends can refer to the following
Not very busy recently, practice writing a carousel graph effect, although the effect and function seems to be no problem, but I think in many things have to be improved, in front of this position I still have a long way to go, of course, there are many things to learn, here only to their own recent research JS a record, I believe that we can write better The link to the jquery framework and the picture will be able to see the effect of source code as follows: code 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> Carousel map </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= "#" > <img src= "images/insco_p1.jpg"/></a></li> <li><a href= "><img src=" images/ Insco_p2.jpg "/></a></li> <li><a href=" # "><img src=" images/insco_p3.jpg "/> </a></li> <li><a href= "#" ><img src= "Images/insco_p1.jpg"/></a></li > <li><a href= "#" ><img src= "images/insco_p2.jpg"/></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; Width of large image var speed = 500; Picture left move speed var s_time = 3000//Picture automatic scrolling speed var Pic_li = $ ("#lunbo_pic"). Children ("Li"); $ (document). Ready (function (e) { var $ul _width= pic_li.width () * PIC_LI.LENGTH;//The Width $ ("#lunbo_pic") of the Carousel graph. Width ($ul _width); nbsp 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 = $ (e.target); 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 (); } }); nbsp 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 >a "). 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 >a"). 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> Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
