jQuery实现选项联动轮播效果_

1、jQuery实现选项联动轮播效果_ 下面我就为大家带来一篇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=j

2、s/jquery-1.11.3.js/script script src=js/index.js/script titleJQ轮播三级连锁/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 hr

3、ef=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; /*方法一*/ /*m

4、argin: 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

5、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

6、=null; $(function() $(.foursa:not(:first-child).hide(); t=setInterval(autoMove(),2021); /鼠标进入轮播停止 $(.parent).hover(function()clearInterval(t),function()t=setInterval(autoMove(),2021);); / 当鼠标进去对应选项时候图片对应改变 $(.top pa).hover(function() clearInterval(t); var num=$(this).index(); showThis(num); /console

7、.log(num); ) ); function autoMove() a+; if(a=4) a=0; play(a); function play(a) $(.foursa).filter(:visible).fadeOut(500).parent().children().eq(a).fadeIn(1000); $(.top p a).eq(a).addClass(selected).siblings().removeClass(selected); /鼠标进入的状况 function showThis(sum) $(.foursa).eq(sum).fadeIn(1000).siblings().fadeOut(500); $(.top p a).eq