<!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. Angular $watch

    如果想在某个属性发生变化的时候执行某些操作,那么scope.$watch是最佳选择 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$w ...

  2. Java的学习之路

    记事本 EditPlus eclipse Java的学习软件,已经系统性学习Java有一段时间了,接下来我想讲一下我在Java学习用到的软件. 1.第一个软件:记事本 记事本是Java学习中最基础的编 ...

  3. Android开发-之SQLite数据库

    之前我们讲了如何将数据存储在文件中,那么除了这种方式呢,就是我们常见的大家都知道的将数据存储在数据库当中了. 将数据存储在数据库中的优势: 1)存储在数据库中的数据更加方便操作,比如增.删.改.查等 ...

  4. bootstrap-modal 学习笔记 源码分析

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/ 我博客的定位就是把这些年看过的源码给慢慢 ...

  5. Caffe学习笔记1--Ubuntu 14.04 64bit caffe安装

    本篇博客主要用于记录Ubuntu 14.04 64bit操作系统搭建caffe环境,目前针对的的是CPU版本: 1.安装依赖库 sudo apt-get install libprotobuf-dev ...

  6. 深入理解DOM事件类型系列第五篇——文本事件

    × 目录 [1]change [2]textInput [3]input[4]propertychange[5]兼容 前面的话 如果DOM结构发生变化,触发的是变动事件:如果文本框中的文本发生变化,触 ...

  7. Android音视频之MediaRecorder音视频录制

    前言: 公司产品有很多地方都需要上传音频视频,今天抽空总结一下音频视频的录制.学习的主角是MediaRecorder类. MediaRecorder类介绍: MediaRecorder类是Androi ...

  8. 创建第二个 vlan network "vlan101" - 每天5分钟玩转 OpenStack（96）

    前面我们创建了 vlan100,并部署了 instance,今天将继续创建第二个 vlan network "vlan101". subnet IP 地址为 172.16.101. ...

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

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

  10. MySQL参数

    1. sql_safe_updates 官方解释如下: , MySQL aborts . 默认为0,如果设置为1,则delete操作和update操作必须带有where子句,且where子句中的列必须 ...