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");
}

 

posted @ 2016-03-15 16:28  逗伴不是瓣  阅读(987)  评论(0)  编辑  收藏  举报