<!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. iOS-App发布证书的申请与使用

    i开发环境:xcode5.1.1 iphonesdk:7.1 开发机器:iMac 真机部署测试:apple个人开发者ID 向导: 必备IDP证书和distribution证书(第一个证书是真机部署测试 ...

  2. 自定义模拟一个Spring IOC容器

    一.模拟一个IOC容器: 介绍:现在,我们准备使用一个java project来模拟一个spring的IOC容器创建对象的方法,也就是不使用spring的jar自动帮助我们创建对象,而是通过自己手动书 ...

  3. SQL Server 复制：事务发布

    一.背景 在复制的运用场景中,事务发布是使用最为广泛的,我遇到这样一个场景:在Task数据库中有Basic与Group两个表,需要提供这两个表的部分字段给其它程序读取放入缓存,程序需要比较及时的获取到 ...

  4. OpenCASCADE Performance Test

    OpenCASCADE Performance Test eryar@163.com Abstract. Use the Draw Test Harness to test the performan ...

  5. Java基础之类Class使用

    大家都知道Java是一门面向对象编程语言,在Java世界里,万事万物皆对象,那个Java中怎么表示对象呢?Class 我们知道Java中的对象都是Object类的子类,那么今天我们就一起来研究一下Ja ...

  6. 创建第一个 local network（I） - 每天5分钟玩转 OpenStack（80）

    在 ML2 配置文件中 enable local network 后,本节将开始创建第一个 local network. 我们将通过 Web GUI 创建第一个 local network. 首先确保 ...

  7. IO通道

    本文原创,转载需标明原处. 通道,主要负责传输数据,相当于流,但流只能是输入或输出类型中的其一,而通道则可以兼并二者. 通道的基类是:Channel boolean isOpen() void clo ...

  8. 安装ClouderaManager以及使用ClouderaManager安装分布式集群的若干细节

    目录 前言 整体介绍 分步安装介绍 总结 一.前言        周末干了近四十个小时中间只休息了五个小时终于成功安装了ClouderaManager以及分布式集群,其中各种辛酸无以言表,唯有泪两行. ...

  9. DEBIAN下中文显示

    转:http://www.cppblog.com/colorful/archive/2012/05/28/176516.aspx 一.首先检查LOCALE情况 说明:DEBIAN因为基于GNU所以,对 ...

  10. TCP三次握手，四次挥手

    前言 在面试的过程中,TCP的传输协议经常会出现.以前我参加面试的过程中就被问到过,现在轮到我面试其他人的时候,我也会问一些相关的问题.作为一名开发者,无论使用什么样的开发语言,最基本的网络知识一定要 ...