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 相关文章推荐
原生js写的放大镜效果
Aug 22 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
js获取URL的参数的方法(getQueryString)示例
Sep 29 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
Sep 26 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
bootstrap tooltips在 angularJS中的使用方法
Apr 10 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
vue自定义switch开关组件,实现样式可自行更改
Nov 01 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
php生成短网址示例
2014/05/05 PHP
浅析get与post的一些特殊情况
2014/07/28 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
php each 返回数组中当前的键值对并将数组指针向前移动一步实例
2016/11/22 PHP
php设计模式之装饰模式应用案例详解
2019/06/17 PHP
laravel框架中间件简单使用方法示例
2020/01/25 PHP
原生javascript获取元素样式属性值的方法
2010/12/25 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
深入分析Cookie的安全性问题
2015/03/01 Javascript
jQuery实现手机号码输入提示功能实例
2015/04/30 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
2015/05/12 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
[02:17]TI4西雅图DOTA2前线报道 啸天mik夫妻档解说
2014/07/08 DOTA
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Pandas:Series和DataFrame删除指定轴上数据的方法
2018/11/10 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Pytorch之保存读取模型实例
2019/12/30 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
泰国演唱会订票网站:StubHub泰国
2018/02/26 全球购物
幼师专业求职推荐信
2013/11/08 职场文书
工程建设实施方案
2014/03/14 职场文书
大学国际贸易专业自荐信
2014/06/05 职场文书
考研英语辞职信
2015/05/13 职场文书