A Carousel of jquery

1. HTML:

<! DOCTYPE html>"UTF-8"> <title>Document</title> <style type="Text/css"> *{margin:0; padding:0;      } #contaner {height:800px;      width:800px;      margin:50px Auto;    border:1px solid red;      }. leftphoto{height:800px;      width:200px;      Overflow:scroll; float: Left;      }. Leftphoto img{width:180px;    height:240px; }. rightphoto{float: Left;      height:798px;      width:580px; Margin-left:10px; Text-Align:center; }. rightphoto:after{content:"";    Clear:both;      }. Show img{height:760px;    width:580px;      }. tell{border:8px solid #38a;      width:172px;    height:232px; }        </style> <script type="Text/javascript"Src="Jquery-1.8.3.js"></script> <script type="Text/javascript"Src="Jquery.carouselFigure.js"></script><script type="Text/javascript">$ (function () {$ (". Leftphoto img"). Carouselfigure (); })    </script>"Contaner"> <divclass="Leftphoto"> "pic/01.jpg"> "pic/02.jpg"> "pic/03.jpg"> "pic/04.jpg"> "pic/05.jpg"> "pic/06.jpg"> "pic/07.jpg"> "pic/08.jpg"> "pic/09.jpg"> "pic/10.jpg"> </div> <divclass="Rightphoto"> <divclass="Show"> ""> </div> <divclass="Control"> <input type="Button"Id=" First"Value="first one"> <input type="Button"Id="Pre"Value="the previous one"> <input type="Button"Id="Next"Value="Next One"> <input type="Button"Id=" Last"Value="one last piece ."> <input type="Button"Id="Auto"Value="Auto Play"> </div> </div></div></body>
2, JS:
(function ($) {$.fn.carouselfigure=function (options) {varSettings =$.extend ({picsrc:". Leftphoto", Photoshow:". Show", First:"#first", Pre:"#pre", Next:"#next", Last:"#last", Auto:"#auto"},options||{}); varpics = This; //Add a sequence number to the picture, which can be accessed by subscript in the Shwpic           This. each (function (n) {$ ( This). Data ("Num", N);          });  This. On ("Click", function () {Showpic ($ ( This). Data ("Num"));          }); $ (first). On ("Click", function () {Showpic (0); }) $ (last). On ("Click", function () {Showpic (pics.length-1); })          varCur =0; $ (pre). On ("Click", function () {showpic (cur-1);          }); $ (next). On ("Click", function () {showpic (cur+1);          }); vars =NULL; $ (auto). Toggle (function () {s= SetInterval (function () {showpic (cur); cur++;}, +); $( This). Val ("Stop playing"); },function () {$ ( This). Val ("Auto Play");          Clearinterval (s); }) function Showpic (index) {if(index<0) {index = pics.length-1; }Else if(index>pics.length-1) {index =0}; $ (settings.photoshow). Find ("img"). attr ("src", PICS[INDEX].SRC). Animate ({ Opcity:0.8                                                  }, -); $ (Pics[index]). Siblings ("img"). Removeclass (" Tell"); $ (Pics[index]). addclass (" Tell"); Cur=index; } showpic (0); return  This; }}) (JQuery)
A Carousel of jquery