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 相关文章推荐
关于捕获用户何时点击window.onbeforeunload的取消事件
Mar 06 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
JavaScript常用脚本汇总(三)
Mar 04 Javascript
javascript中setInterval的用法
Jul 19 Javascript
jQuery实现html双向绑定功能示例
Oct 09 jQuery
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
Nov 21 Javascript
简述vue路由打开一个新的窗口的方法
Nov 29 Javascript
express启用https使用小记
May 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循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
详解Yaf框架PHPUnit集成测试方法
2017/12/27 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
javascript生成随机大小写字母的方法
2014/02/20 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
javascript常用方法总结
2015/05/14 Javascript
创建一个类Person的简单实例
2016/05/17 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
BootStrap 模态框实现刷新网页并关闭功能
2017/01/04 Javascript
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
Vue动态组件实例解析
2017/08/20 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
Python高效编程技巧
2013/01/07 Python
Python代码调试的几种方法总结
2015/04/15 Python
在Python程序中进行文件读取和写入操作的教程
2015/04/28 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
大二学期个人自我评价
2014/01/13 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
爱与责任演讲稿
2014/05/20 职场文书
班级团队活动方案
2014/08/14 职场文书
离婚协议书范本样本
2014/08/19 职场文书
致接力运动员加油稿
2015/07/21 职场文书
物业保洁员管理制度
2015/08/05 职场文书