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 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
node.js中的fs.linkSync方法使用说明
Dec 15 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
微信小程序 本地数据存储实例详解
Apr 13 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
angular4自定义组件详解
Sep 28 Javascript
React如何避免重渲染
Apr 10 Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 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程序中的常见漏洞进行攻击(上)
2006/10/09 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
PHP环境搭建的详细步骤
2016/06/30 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
JS简单实现元素复制示例附图
2013/11/19 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
深入了解query和params的使用区别
2019/06/24 Javascript
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
JavaScript实现移动端拖动元素
2020/11/24 Javascript
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Python温度转换实例分析
2018/01/17 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
Python logging设置和logger解析
2019/08/28 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
纯css实现照片墙3D效果的示例代码
2017/11/13 HTML / CSS
HTML5 History API 实现无刷新跳转
2016/01/11 HTML / CSS
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
Charles & Keith欧盟:新加坡时尚品牌
2019/08/01 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
和平主题的演讲稿
2014/01/12 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技