[Front-end exercise Demo] Use jquery and vue to implement carousel images, jqueryvue

[Front-end exercise Demo] Use jquery and vue to implement carousel images, jqueryvue
I. Implement carousel Images Using jQuery

The effect is as follows:

The first part is the HTML part. The Code is as follows:

<div class="box">  <div class="img_list">    <ul>      <li class="img1"><a href="#"></a></li>      <li class="img2"><a href="#"></a></li>      <li class="img3"><a href="#"></a></li>      <li class="img4"><a href="#"></a></li>      <li class="img5"><a href="#"></a></li>      <li class="img6"><a href="#"></a></li>    </ul>  </div>  <div class=button1>     <span class="prev"></span>    <span class="next"></span>  </div>  <div class="button2">    <span class="red"></span>    <span></span>    <span></span>    <span></span>    <span></span>    <span></span>  </div></div>

JS Code Analysis:

Var img_list = ['img1', 'img2', 'img3', 'img4', 'img5', 'img6']; var index = 0; var $ s = $ ('. button2 span '); $ ('. prev '). click (function () {imgPrev () ;}) $ ('. next '). click (function () {imgNext () ;}) // scroll to the left to function imgPrev () {img_list.unshift (img_list [img_list.length-1]); // Insert the last entry of the Image array to the first entry of the array, img_list.pop (); // remove the last entry of the array $ ('lil '). each (function (I, e) {// execute the function for each li, remove the current class, and add a new class $ (e ). removeClass (). addClass (img_list [I]) ;}) index --; // to execute show () if (index <0) {index = img_list.length ;}show ();} // scroll to the right: function imgNext () {img_list.push (img_list [0]); // Add the first entry of the Image array to the end of the array img_list.shift (); // remove the first entry of the array $ ('lil') at the same time '). each (function (I, e) {$ (e ). removeClass (). addClass (img_list [I])}) index ++; if (index> img_list.length) {index = 0 ;}show () ;}function show () {$ ($ s ). eq (index ). addClass ('red '). siblings (). removeClass ('red') // change the color under the image} $ s. each (function () {// function of switching an image when you click -- under the image $ (this ). click (function () {var currentIndex = $ (this ). index (); // obtain the index value of the clicked -- var a = currentIndex-index; // compare the index value obtained in the previous step with the index of the current image, obtain the difference if (a = 0) {return;} else if (a> 0) {var new_list = img_list.splice (0, ); // extract the items between the current image and the target image, and change img_list = $ in the original array. merge (img_list, new_list); // merge the items extracted from the previous step with the changed array, the extracted item is moved to the end of the target index $ ('lil '). each (function (I, e) {$ (e ). removeClass (). addClass (img_list [I]) ;}) index = currentIndex; show () ;}else if (a <0) {img_list.reverse (); // reverse the array and repeat the preceding operation var old_list = img_list.splice (0,-a); img_list = $. merge (img_list, old_list); img_list.reverse (); $ ('lil '). 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 );

Ii. vue Implementation of carousel Images

The effect is as follows:

The basic principle of vue carousel images is relatively simple, that is, the image is displayed through v-show = "index = currentIndex", and the image is switched by changing the currentIndex value.