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

2019-11-20 10:14:32

字体：大中小

来源：转载

供稿：网友

<!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;}

定义变量和定时器，变量等价于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实现选项联动轮播效果【附实例】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：Jquery实现的简单轮播效果【附实例】

下一篇：浅析JavaScript中浏览器的兼容问题