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

    padding:;

    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实现选项联动轮播的更多相关文章

  1. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  2. jQuery仿淘宝图片无缝滚动轮播

    自己前天,也就是1月8日的时候早上自己写了一个图片滚动轮播(基于jQuery). 其实几个月以前就有朋友问过我怎么做出和淘宝上面一样的滚动轮播,一直到现在也没有真正的写好,这次写得差不多了. 但是还有 ...

  3. 2017年10月21日 CSS常用样式&鼠标样式 以及 jQuery鼠标事件& jQuery图片轮播& jQuery图片自动轮播代码

    css代码 背景与前景 background-color:#0000; //背景色,样式表优先级高 background-image:url(路径); //设置背景图片 background-atta ...

  4. jquery特效（4）—轮播图②（定时自动轮播）

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

  5. jQuery实际案例①——淘宝精品广告(鼠标触碰切换图片、自动轮播图片)

    遇到的问题:自动轮播的实现,实质与轮播图一样儿一样儿的,不要被不同的外表所欺骗,具体的js代码如下:

  6. jQuery实现todo及轮播图

    内容: 1.todo程序 2.轮播图 1.todo程序 需求: 实现一个todo程序,可以添加数据,可以删除数据,可以修改数据,可以查看所有数据 另外实现自己的一系列弹窗:用于提示用户的提示框.用于警 ...

  7. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  8. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  9. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. fir.im Log Guru 正式开源，快速找到 iOS 应用无法安装的原因

    很开心的宣布 Log Guru 正式开源! Log Guru,是 fir.im 开发团队创造的小轮子,用在 Mac 电脑上的日志获取,Github 地址:FIRHQ/LogGuru. Log Guru ...

  2. 精通visual c++指纹模式识别系统算法及实现

    通过学习,掌握以下几个问题: 1.核心算法,并且向GVF衍生: 2.核心库封装的方法 2016年11月16日06:52:51 昨日实现了梯度场和频率场的计算.最大的感觉就是建立基础代码库的重要性. 如 ...

  3. SQL Server 跨网段（跨机房）FTP复制

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 搭建过程(Process) 注意事项(Attention) 参考文献(References) ...

  4. OPENVPN+MYSQL认证+客户端配置

    安装环境:ubuntu 12.04 x64 一 服务器端 1.安装openvpn及相应包 1 2 root@jkb:~# aptitude install openvpn root@jkb:~# ap ...

  5. Conversion Operators in OpenCascade

    Conversion Operators in OpenCascade eryar@163.com Abstract. C++ lets us redefine the meaning of the ...

  6. python统计某一个进程名所占用的内存

    设计思路: 通过python,执行cmd中tasklist命令,获取要统计的进程的相关信息:通过正则表达式,查找出进程名称.进程pid.内存使用,然后打印出来. 作为pythoner,有时候需要统计p ...

  7. react+redux教程（三）reduce()、filter()、map()、some()、every()、...展开属性

    reduce().filter().map().some().every()....展开属性   这些概念属于es5.es6中的语法,跟react+redux并没有什么联系,我们直接在https:// ...

  8. Java 8 Stream API详解--转

    原文地址:http://blog.csdn.net/chszs/article/details/47038607 Java 8 Stream API详解 一.Stream API介绍 Java8引入了 ...

  9. 韩国"被申遗" （转自果壳）

    "被申遗"不是指"没申遗",而是全都经过了中国人重新包装. 近日,有报道称韩国计划将火炕申报世界遗产,联系近年来韩国多起"申遗事件",国内网 ...

  10. 深入理解javascript原型和闭包系列

    从下面目录中可以看到,本系列有16篇文章,外加两篇后补的,一共18篇文章.写了半个月,从9月17号开始写的.每篇文章更新时,读者的反馈还是可以的,虽然不至于上头条,但是也算是中规中矩,有看的人,也有评 ...