<!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. python定时重跑获取数据

    做大数据的童鞋经常会写定时任务跑数据,由于任务之间的依赖(一般都是下游依赖上游的数据产出),所以经常会导致数据获取失败,因为很多人发现数据失败后 都会去查看日志,然后手动去执行自己的任务.下面我实现了 ...

  2. Hammer.js手势库 安卓4.0.4上的问题

    Hammer.JS - v1.0.7dev - 2014-02-18 1.Hammer.JS 在安卓4.0.4 , 4.1上 touchmove事件丢失 https://code.google.com ...

  3. 数据结构与算法JavaScript (五) 串(经典KMP算法)

    KMP算法和BM算法 KMP是前缀匹配和BM后缀匹配的经典算法,看得出来前缀匹配和后缀匹配的区别就仅仅在于比较的顺序不同 前缀匹配是指:模式串和母串的比较从左到右,模式串的移动也是从 左到右 后缀匹配 ...

  4. 列出场景对象Lightmap属性

    首先上效果图: 编辑器代码: using UnityEngine; using UnityEditor; using System.Collections; public class Lightmap ...

  5. c#代码命名规则

    c#代码命名规则   以前没有考虑过命名的这个问题,写起来就是随心所欲,想怎么搞就怎么搞,在但是代码越写越乱,连自己都搞不清楚了,不得不进行认真考虑.参考了一些文章,形成以下想法:   一.      ...

  6. c++面试常用知识(sizeof计算类的大小，虚拟继承，重载，隐藏，覆盖)

    一. sizeof计算结构体 注:本机机器字长为64位 1.最普通的类和普通的继承 #include<iostream> using namespace std; class Parent ...

  7. 将 instance 连接到 second_local_net - 每天5分钟玩转 OpenStack（85）

    今天是 local network 的最后一个小节,我们将验证两个local network 的连通性. launch 新的 instance “cirros-vm3”,网络选择 second_loc ...

  8. 应用程序框架实战十六:DDD分层架构之值对象（介绍篇）

    前面介绍了DDD分层架构的实体,并完成了实体层超类型的开发,同时提供了验证方面的支持.本篇将介绍另一个重要的构造块——值对象,它是聚合中的主要成分. 如果说你已经在使用DDD分层架构,但你却从来没有使 ...

  9. T-SQL：毕业生出门需知系列（三）

    第3课 排序检索数据 3.1 排序数据(ORDER BY) 下面的 SQL 语句返回某个数据库表的单个列.观察其输出,并没有特定的顺序. SELECT prod_name FROM Products; ...

  10. Connect(); // 2015 简要整理

    去年 Connect(); 2014 Visual Studio Contact(); 直播笔记 对于我个人来说,今年 Connect(); 的三个重要发布: ASP.NET 5 RC1 Entity ...