JQuery implementation option linkage carousel effect [attached instance], jquery instance

JQuery implementation option linkage carousel effect [attached instance], jquery instance

<! Doctype html> 
CSS
* {Border: none; margin: 0; padding: 0; list-style: none; outline: none;} html, body {width: 100%; height: 100% ;} /* method 2 */body {display: flex; align-items: center;/***** horizontal center *****/justify-content: center; /* vertical center */}. parent {width: 750px; height: 400px;/* method 1 * // * margin: 0 auto; * // * position: relative; * // * top: 50%; * // * margin-top:-200px; * //}/* carousel */. top p {width: 90%; margin: 0 auto ;}. top p a {display: inline-block; line-height: 30px; width: 23%; padding: 10px 0; text-align: center; text-decoration: none; border: 2px solid transparent; color: slategray ;}. top p. selected {border: 2px solid # e4393c; color: # e4393c;}/* image */. fours {width: pixel PX; margin: 0 auto; height: 300px; position: relative; margin-top: 30px ;}. fours a {position: absolute ;}
JS
Define variables and timers. variables are equivalent to indexes in eq (index). Automatic carousel is possible. The key is how to correspond to the desired carousel screen when you move the mouse into the tab area,
Method: stop the timer, get the subscript of the current tab, and match the corresponding carousel screen.
Var a = 0; var t = null; $ (function () {$ ('. fours> a: not (: first-child )'). hide (); t = setInterval ("autoMove ()", 2000); // enter the slideshow stop $ ('. parent '). hover (function () {clearInterval (t)}, function () {t = setInterval ("autoMove ()", 2000 );}); // The image changes accordingly when you move the cursor to the corresponding option $ (". top p> "). hover (function () {clearInterval (t); var num = $ (this ). index (); showThis (num); // console. log (num) ;})}; function autoMove () {a ++; if (a >= 4) {a = 0 ;} play ();} function play (a) {$ ('. fours> '). filter (": visible "). fadeOut (1, 500 ). parent (). children (). eq (). fadeIn (1000); $ ('. top p '). eq (). addClass ("selected "). siblings (). removeClass ("selected");} // function showThis (sum) {$ (". fours> "). eq (sum ). fadeIn (1000 ). siblings (). fadeOut (500); $ (". top p "). eq (sum ). addClass ("selected "). siblings (). removeClass ("selected ");}
The above jQuery implementation option linkage carousel effect [attached instance] is all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for the customer's house.