[Front End Practice demo] using jquery and Vue to implement the carousel diagram

First, jquery implementation of the Carousel map

The effect is as follows:

The first is the HTML section, the code is as follows:

<Divclass= "box">  <Divclass= "Img_list">    <ul>      <Liclass= "IMG1"><ahref="#"><imgsrc= "Http://img2.ph.126.net/ABfTI4ftlXI6fsx0V0m1Ow==/1283807368797424109.jpg"alt=""></a></Li>      <Liclass= "Img2"><ahref="#"><imgsrc= "Http://img2.ph.126.net/mdHolUx1t_zV9aT_PLZ_pw==/6597526063984144847.jpg"alt=""></a></Li>      <Liclass= "IMG3"><ahref="#"><imgsrc= "Http://img2.ph.126.net/koJ11p3-TxCfw4rnYWKaTw==/3262576455153543821.jpg"alt=""></a></Li>      <binclass= "Img4"><ahref="#"><imgsrc= "Http://img2.ph.126.net/KJmPAmozfBTu0HgOt1YCTQ==/2993204902441477019.jpg"alt=""></a></Li>      <binclass= "Img5"><ahref="#"><imgsrc= "Http://img2.ph.126.net/xiw34jbE-10m38OWGR37Gw==/1497165401224217327.jpg"alt=""></a></Li>      <Liclass= "Img6"><ahref="#"><imgsrc= "Http://img0.ph.126.net/xX2BkGXli3O_xpGyoWkRUA==/3270739229478149748.jpg"alt=""></a></Li>    </ul>  </Div>  <Divclass=button1>    <spanclass= "Prev"></span>    <spanclass= "Next"></span>  </Div>  <Divclass= "Button2">    <spanclass= "Red"></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>  </Div></Div>

JS Code Analysis:

varImg_list = [' img1 ', ' img2 ', ' img3 ', ' img4 ', ' img5 ', ' Img6 '];varindex = 0;var$s = $ ('. Button2 span '));$('. Prev '). Click (function() {Imgprev ();}) $('. Next '). Click (function() {Imgnext ();})//scroll to Left functionfunctionImgprev () {Img_list.unshift (img_list[img_list.length-1]);//inserts the last item of a picture array into the first arrayImg_list.pop ();//move the last item of an array at the same time$ (' Li '). each (function(I, E) {//for each Li execution function, remove the current class and add a new class$ (E). Removeclass (). addclass (Img_list[i]); }) Index--;//in order to execute show ()  if(Index < 0) {Index=img_list.length; } show ();}//Scroll to right functionfunctionImgnext () {Img_list.push (img_list[0]);//adds the first item of a picture array to the end of the arrayImg_list.shift ();//move the first item of the divisor group at the same time$ (' Li '). each (function(i, E) {$ (E). Removeclass (). addclass (Img_list[i])}) Index++; if(Index >img_list.length) {Index= 0; } show ();}functionShow () {$ ($s). EQ (index). addclass (' Red '). Siblings (). Removeclass (' Red ')//make the picture--then change the color} $s. each (function() {//When you click on the image--the function of the toggle picture$( This). Click (function() {    varCurrentindex = $ ( This). index ();//gets the index value of the clicked-    varA = Currentindex-index;//compares the index value obtained in the previous step with the index of the current picture to get the difference    if(A = = 0) {      return; } Else if(A > 0) {                                                      varnew_list = Img_list.splice (0, a);//extracts the items between the current picture and the destination picture, while the original array changesImg_list = $.merge (img_list, new_list);//merges the items extracted from the previous step with the changed array, moving the extracted items to the back of the target index$ (' Li '). each (function(i, E) {$ (E). Removeclass (). addclass (Img_list[i]); }) Index=Currentindex;    Show (); }Else if(a<0) {img_list.reverse (); //reverse the array to repeat the above operation      varOld_list=img_list.splice (0,-a); Img_list=$.merge (img_list,old_list);      Img_list.reverse (); $(' Li '). each (function(i, E) {$ (E). Removeclass (). addclass (Img_list[i]); }) Index=Currentindex;    Show (); })}) $ (document). On ("Click", ". Img1",function() {Imgprev (); return false;//Block Default Events}) $ (document). On ("Click", ". Img3",function() {imgnext (); return false;}) $('. Box '). MouseOver (function() {clearinterval (timer);}) $('. Box '). MouseLeave (function() {Timer=setinterval (imgnext,2000)}) Timer=setinterval (imgnext,2000);

Second, Vue implementation of the Carousel map

The effect is as follows:

The basic principle of Vue Carousel diagram is relatively simple, that is, through v-show= "Index===currentindex" to achieve the picture display, by changing the value of the currentindex to switch the picture

[Front End Practice demo] using jquery and Vue to implement the carousel diagram