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 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
简洁短小的 JavaScript IE 浏览器判定代码
Mar 21 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
Bootstrap实现默认导航栏效果
Sep 21 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
使用vue2实现购物车和地址选配功能
Mar 29 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 Javascript
基于Vue全局组件与局部组件的区别说明
Aug 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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
THINKPHP内容分页代码分享
2015/01/14 PHP
php获取错误信息的方法
2015/07/17 PHP
PHP框架性能测试报告
2016/05/08 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
jQuery1.6 使用方法二
2011/11/23 Javascript
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
2013/02/25 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
javascript的tab切换原理与效果实现方法
2015/01/10 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
Mongoose学习全面理解(推荐)
2017/01/21 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
微信小程序全局变量功能与用法详解
2019/01/22 Javascript
微信小程序 wepy框架与iview-weapp的用法详解
2019/04/10 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python中with及contextlib的用法详解
2017/06/08 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
python for循环remove同一个list过程解析
2019/08/14 Python
中外合拍动画首获奥斯卡提名,“上海出品”《飞奔去月球》能否拿下最终大奖?
2021/03/16 国漫
爱情检讨书大全
2014/01/21 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android