<!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. ionic中关于ionicView 的生命周期

    当我们来回切换页面时候,视图被缓存下来,不用每次再去new一个新的视图,可以大大地提高性能.当跳出一个视图后,视图的元素被保存在DOM中,它的作用域也就不在$watch的作用域内,当我们访问一个已经被 ...

  2. API调试工具推荐 - httpie

    API调试工具推荐 - httpie <HelloGitHub>第07期上面看到这个python项目,好东西 文档地址 但是安装的时候报错,google之后发现是个已知的bug,直接使用p ...

  3. jsp 分页， 判断是第一页，和最后一页.

    <% //页的行数 int pagesize =20; //当前页 int currentPage = 1; try { currentPage = Integer.parseInt(reque ...

  4. Apk去掉签名以及重新签名的方法

    Android开发中很重要的一部就是用自己的密钥给Apk文件签名,不经过签名的Apk文件一般是无法安装的,就算装了最后也是失败. 网上流传的"勾选允许安装未知来源的应用"其实跟签不 ...

  5. BCP 数据的导入和导出

    BCP 命令的参数很多,使用 -h 查看帮助信息,注意:参数是区分大小写的 使用BCP命令导出和导入数据常用的参数如下 bcp {[[database_name.][schema_name]].{ta ...

  6. SSIS Design7：数据类型的选择

    对于SSIS的数据类型,容易遗漏精度的是DateTime,不正确的使用DateTime,time,decimal 等数据类型,可能导致溢出或数据丢失. 1,Variable 和 Parameter的D ...

  7. React JS快速开始手册

    怎样用React JS构建一个用户界面?本文将快速地给你一个React JS的概览.代码,请君移步react-starter 概念 React只有很少的API,这使得它很容易去学习与理解.当然,使用它 ...

  8. spring控制并发数的工具类ConcurrencyThrottleSupport和ConcurrencyThrottleInterceptor

    官方文档: /** * Support class for throttling concurrent access to a specific resource. * * <p>Desi ...

  9. 1Z0-053 争议题目解析682

    1Z0-053 争议题目解析682 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 682.Identify the scenarios in which the RMAN CROS ...

  10. 相克军_Oracle体系_随堂笔记014-锁 latch,lock

    1.Oracle锁类型 2.行级锁:DML语句 3.表级锁:TM 4.锁的兼容性 5.加锁语句以及锁的释放 6.锁相关视图 7.死锁 1.Oracle锁类型 锁的作用     latch锁:chain ...