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 相关文章推荐
使用新的消息弹出框blackbirdjs
Oct 16 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
JQ实现新浪游戏首页幻灯片
Jul 29 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
Dec 01 Javascript
H5实现中奖记录逐行滚动切换效果
Mar 13 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
JS+canvas动态绘制饼图的方法示例
Sep 12 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
在Angular中使用JWT认证方法示例
Sep 10 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 stream_context_create()函数的使用示例
2015/05/12 PHP
php cookie用户登录的详解及实例代码
2017/01/03 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
一文掌握PHP Xdebug 本地与远程调试(小结)
2019/04/23 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JavaScript入门系列之知识点总结
2016/03/24 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
浅谈使用splice函数对数组中的元素进行删除时的注意事项
2016/12/04 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
webuploader分片上传的实现代码(前后端分离)
2018/09/10 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
2020/10/31 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
5款非常棒的Python工具
2018/01/05 Python
python opencv之SIFT算法示例
2018/02/24 Python
python批量设置多个Excel文件页眉页脚的脚本
2018/03/14 Python
django如何连接已存在数据的数据库
2018/08/14 Python
Flask之请求钩子的实现
2018/12/23 Python
Python3 批量扫描端口的例子
2019/07/25 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
香港交友网站:be2香港
2018/07/22 全球购物
Tostadora意大利:定制T恤
2019/04/08 全球购物
五型班组建设方案
2014/02/10 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
龙猫观后感
2015/06/09 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
考研经验交流会策划书
2015/11/02 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书