jQuery实现选项联动轮播效果【附实例】


Posted in Javascript onApril 19, 2016
<!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: 0;
  padding: 0;
  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实现选项联动轮播效果【附实例】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 特性检测并非浏览器检测
Jan 15 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
JS实现手写 forEach算法示例
Apr 29 Javascript
JS实现小米轮播图
Sep 21 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 #Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 #Javascript
深入浅析JavaScript中的constructor
Apr 19 #Javascript
js点击返回跳转到指定页面实现过程
Aug 20 #Javascript
javascript html5摇一摇功能的实现
Apr 19 #Javascript
一些实用性较高的js方法
Apr 19 #Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 #Javascript
You might like
PHP脚本的10个技巧(5)
2006/10/09 PHP
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
浅谈php7的重大新特性
2015/10/23 PHP
Thinkphp集成抖音SDK的实现方法
2020/04/28 PHP
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
深入理解bootstrap框架之第二章整体架构
2016/10/09 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
ajax图片上传,图片异步上传,更新实例
2016/12/30 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
nodejs 图片预览和上传的示例代码
2017/09/30 NodeJs
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
Vue 递归多级菜单的实例代码
2019/05/05 Javascript
对TypeScript库进行单元测试的方法
2019/07/18 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
关于vue-cli3打包代码后白屏的解决方案
2020/09/02 Javascript
Python的Django中django-userena组件的简单使用教程
2015/05/30 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python 和 JS 有哪些相同之处
2017/11/23 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python爬虫中多线程的使用详解
2019/09/23 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
施华洛世奇水晶荷兰官方网站:SWAROVSKI荷兰
2017/05/12 全球购物
JSP&Servlet技术面试题
2015/05/21 面试题
银行毕业实习自我鉴定
2013/09/19 职场文书
怎样写好自荐信和推荐信
2013/12/26 职场文书
给全校老师的建议书
2014/03/13 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
小摄影师教学反思
2014/04/27 职场文书
经理岗位职责范本
2015/04/15 职场文书
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA