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数据缓存系统实现代码
Oct 24 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
jQuery模拟超链接点击效果代码
Apr 21 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
Javascript的闭包详解
Dec 26 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
在Angular中使用JWT认证方法示例
Sep 10 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 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
第七节 类的静态成员 [7]
2006/10/09 PHP
php开发微信支付获取用户地址
2015/10/04 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
javascript常用函数(2)
2015/11/05 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
Bootstrap table 服务器端分页功能实现方法示例
2020/06/01 Javascript
[01:07:19]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第一场
2018/04/06 DOTA
python使用win32com在百度空间插入html元素示例
2014/02/20 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
基于python实现百度翻译功能
2019/05/09 Python
对Python _取log的几种方式小结
2019/07/25 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
浅析matlab中imadjust函数
2020/02/27 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
python pillow库的基础使用教程
2021/01/13 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
意大利男装网店:Vrients
2019/05/02 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
求职自荐信的格式
2014/04/07 职场文书
活动总结范文
2014/08/30 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
入党团支部推荐意见
2015/06/02 职场文书