Jquery实现的简单轮播效果【附实例】


Posted in Javascript onApril 19, 2016

Jquery实现的简单轮播效果【附实例】

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/baner.js"></script>
</head>
<body>
  <div class="main">
    <a href=""><img src="img/baner-1.jpg" alt=""></a>
    <a href=""><img src="img/baner-2.jpg" alt=""></a>
    <a href=""><img src="img/baner-3.jpg" alt=""></a>
    <a href=""><img src="img/baner-4.jpg" alt=""></a>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
  </div>
</body>
</html>
/*************初始化************/
*{margin:0;padding: 0;border: none;list-style: none}
/*********轮播左右居中*************/
.main{
  width: 1024px;
  height: 320px;
  margin: 0 auto;
  position: relative;
}
.main a{
  position: absolute;
}
.main a img{
  width: 100%;
  height: 320px;

}
/***********左边小图标************/
.main ul li.selected{
  background: #f97157;
}
.main ul{
  position: absolute;
  z-index: 999;
  top: 120px;
  left: 20px;
}
.main ul li{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #909090;
  cursor: pointer;
  text-align: center;
}
/**
 * Created by Administrator on 16-3-12.
 */
/***********定义全局变量和定时器*************/
var t=null;

var n=0;/**动态变化**/
var count;
/************************/
$(function(){
  count=$(".main a").length;/*给动态变化的n备用*/
  /**让不是轮播中的第一个隐藏**/
  $(".main a:not(:first-child)").hide();
  /*点击当前li当前li对应的图片显示出来*/
  $(".main ul li").click(function(){
    var index=$(this).text()-1;
    n=index;
    console.log(n);
    /*****让当前显示的图片0.5S内渐隐,并匹配下一个渐显示*****/
    $(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(1000);
    /*******聚焦,给当前li追加类,改变背景色*******/
    $(this).addClass("selected");
    /****同时移除当前li的所有兄弟的类名为selected,还原背景色*****/
    $(this).siblings().removeClass("selected");
  });
  /***定义定时器3秒执行一次****/
  t=setInterval("autoMove()",3000);
  /****当鼠标进入时候定时器停止,移除时候定时器开启****/
  $(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);});
});
/***定义自动轮播函数****/
function autoMove(){
  if(n>=(count-1)){
    n=0;
  }else{
   ++n;
  }
  /*****给li执行匹配的事件*****/
  $(".main ul li").eq(n).trigger("click");
}

以上这篇Jquery实现的简单轮播效果【附实例】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
你需要知道的JavsScript可以做什么?
Jun 29 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
js切换div css注意的细节
Dec 10 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
js 调用百度地图api并在地图上进行打点添加标注
May 13 Javascript
html的DOM中document对象anchors集合用法实例
Jan 21 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
vue.js+element 默认提示中英文操作
Nov 11 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 #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
You might like
php 冒泡排序 交换排序法
2011/05/10 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
15 个 JavaScript Web UI 库
2010/05/19 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
Eclipse配置Javascript开发环境图文教程
2015/01/29 Javascript
javascript学习小结之prototype
2015/12/03 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
使用bat打开多个cmd窗口执行gulp、node
2017/02/17 Javascript
JavaScript实现的斑马线表格效果【隔行变色】
2017/09/18 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
2020/01/22 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
Python数据分析之获取双色球历史信息的方法示例
2018/02/03 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
利用pyecharts实现地图可视化的例子
2019/08/12 Python
Python3批量移动指定文件到指定文件夹方法示例
2019/09/02 Python
Python实现图片识别加翻译功能
2019/12/26 Python
pycharm导入源码的具体步骤
2020/08/04 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
大学生求职推荐信
2013/11/27 职场文书
绩效工资分配方案
2014/01/18 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
通知书大全
2015/04/27 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书