jQuery实现选项联动轮播效果【附实例】

<！doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <link rel="stylesheet" href="css/baner.css"> <script src="js/jquery-1.11.3.js"></script> <script src="js/index.js"></script> <title>JQ轮播三级连锁</title> </head> <body><div class="parent"> <div class="top"><p><a href="">创意空间</a><a href="">永恒的爱</a><a href="">浪漫真情</a><a href="">珍贵独特</a></p> </div> <div class="fours"><a href=""><img src="img/1.jpg" alt=""></a><a href=""><img src="img/2.jpg" alt=""></a><a href=""><img src="img/3.jpg" alt=""></a><a href=""><img src="img/4.jpg" alt=""></a> </div></div> </body></html>

CSS

*{border:none;margin: 0;padding: 0;list-style: none;outline: none;}html,body{width: 100%;height: 100%;}/*方法二*/body{display: flex;align-items: center;/****水平居中****/justify-content: center;/*垂直居中*/}.parent{width: 750px;height: 400px;/*方法一*//*margin: 0 auto;*//*position: relative;*//*top: 50%;*//*margin-top: -200px;*/}/*轮播*/.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 a.selected{border: 2px solid #e4393c;color: #e4393c;}/*图片*/.fours{width: 650px;margin: 0 auto;height: 300px;position: relative;margin-top: 30px;}.fours a{position: absolute;}

JS
定义变量和定时器，变量等价于eq（index）中index,自动轮播是可以的，关键在于，鼠标进入选项卡区域时候，怎么对应想要的轮播画面，
方法：停止定时器，获取当前选项卡下标，匹配对应的轮播画面显示出来。

var a=0;var t=null;$（function（）{$（".fours>a:not（:first-child）"）.hide（）;t=setInterval（"autoMove（）",2000）;//鼠标进入轮播停止$（".parent"）.hover（function（）{clearInterval（t）},function（）{t=setInterval（"autoMove（）",2000）;}）;// 当鼠标进去对应选项时候图片对应变化$（".top p>a"）.hover（function（）{ clearInterval（t）; var num=$（this）.index（）; showThis（num）;//console.log（num）;}）}）;function autoMove（）{ a++; if（a>=4）{a=0; } play（a）;}function play（a）{$（".fours>a"）.filter（":visible"）.fadeOut（500）.parent（）.children（）.eq（a）.fadeIn（1000）;$（".top p a"）.eq（a）.addClass（"selected"）.siblings（）.removeClass（"selected"）;}//鼠标进入的情况function showThis（sum）{$（".fours>a"）.eq（sum）.fadeIn（1000）.siblings（）.fadeOut（500）;$（".top p a"）.eq（sum）.addClass（"selected"）.siblings（）.removeClass（"selected"）;}

以上这篇jQuery实现选项联动轮播效果【附实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。