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 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
Dec 21 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 Javascript
每日十条JavaScript经验技巧(一)
Jun 23 Javascript
详解jQuery的Cookie插件
Nov 23 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
Sep 15 Javascript
基于jquery实现九宫格拼图小游戏
Nov 30 jQuery
javaScript把其它类型转换为Number类型
Oct 13 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
如何制作自己的原生JavaScript路由
May 05 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 chmod 函数与批量修改文件目录权限
2010/05/10 PHP
mysql数据库差异比较的PHP代码
2012/02/05 PHP
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
js 验证身份证信息有效性
2014/03/28 Javascript
jQuery修改class属性和CSS样式整理
2015/01/30 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
JS实现支持多选的遍历下拉列表代码
2015/08/20 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
JSONP跨域请求
2017/03/02 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/15 Javascript
基于react组件之间的参数传递(详解)
2017/09/05 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
2019/09/01 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
js数组中去除重复值的几种方法
2020/08/03 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
python实现批量修改文件名
2020/03/23 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
python3中编码获取网页的实例方法
2020/11/16 Python
Flask处理Web表单的实现方法
2021/01/31 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
给领导的检讨书
2014/02/16 职场文书
党支部组织生活会整改方案
2014/09/30 职场文书
公司周年庆典标语
2014/10/07 职场文书
教师节祝酒词
2015/08/11 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
入团申请书格式
2019/06/20 职场文书