<!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

         *{margin: 0;padding: 0;}

         ul,ol{ list-style: none;}

         .wrapper{

             width: 670px;

             height: 240px;

             margin: 100px auto;

             overflow: hidden;

             position: relative;

         }

         ol{

             position: absolute;

             right: 0;

             bottom: 10px;

             width: 190px;

         }

         ol li{

             float: left;

             width: 20px;

             height: 20px;

             margin: 0 5px;

             text-align: center;

             border-radius: 50%;

             cursor: default;

             background-color: #abc;

         }

         ol li.current{

             background-color: pink;

         }

     </style>

     <script type="text/javascript" src="../jquery-1.11.1.min.js"></script>

     <script type="text/javascript">

         $(function () {

             // 根据ol下li的索引号，匹配ul下相对应li的索引号

             $(".wrapper ol li").mouseenter(function () {

                 $(this).addClass("current").siblings().removeClass("current");

                 $(".wrapper ul li").eq($(this).index()).fadeIn("fast").siblings().fadeOut();

             });

         });

     </script>

 </head>

 <body>

     <div class="wrapper">

         <ul>

             <li><img src="data:images/1.jpg" alt=""/></li>

             <li><img src="data:images/2.jpg" alt=""/></li>

             <li><img src="data:images/3.jpg" alt=""/></li>

             <li><img src="data:images/4.jpg" alt=""/></li>

             <li><img src="data:images/5.jpg" alt=""/></li>

             <li><img src="data:images/6.jpg" alt=""/></li>

         </ul>

         <ol>

             <li class="current">1</li>

             <li>2</li>

             <li>3</li>

             <li>4</li>

             <li>5</li>

             <li>6</li>

         </ol>

     </div>

 </body>

 </html>

jQuery的fadeIn和fadeOut实现的轮播图的更多相关文章

  1. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  2. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  3. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  4. jQuery轮播图--不使用插件

    说明:引入jquery.min.js    将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  5. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. jquery改造轮播图1

    g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...

  8. jQuery轮播图（二）利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  9. jQuery轮播图（一）轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

随机推荐

  1. jdbc第三天

    事务 什么是事务? 转账: 1. 给张三账户减1000元 2. 给李四账户加1000元 当给张三账户减1000元后,抛出了异常!这会怎么样呢?我相信从此之后,张三再也不敢转账了. 使用事务就可以处理这 ...

  2. iOS开发 - 获取真机沙盒数据

    今天要获取之前真机測试时写入沙盒的数据, 本来以为挺麻烦的. 后来捣腾了一下, 才知道原来这么简单... 以下直接看详细步骤. 前提: 真机已经通过USB和你的电脑连接上了! 1.进入Organize ...

  3. ORACLE-SQL（一）

      迁移时间:2017年6月1日10:02:43 CreateTime--2017年6月1日09:59:30Author:Marydon 一.SQL语句 (一)基础篇 1.1.1 where 子句 1 ...

  4. SettingsEclipse&MyEclipse

      eclipse优化 迁移时间--2017年5月20日09:39:16 CreateTime--2016年11月18日11:27:02 Author:Marydon ModifyTime--2017 ...

  5. 17、JAVA流程控制

    一.IF 1.第一种形式:if if(逻辑表达式){ 语句1; 语句2; ... } 当if中只有一条语句时,可以省略{} 2.第二种形式:if-else if(逻辑表达式){ 语句块1: } els ...

  6. grub安装的 三种安装方式

    1. 引言 grub是什么?最常态的理解,grub是一个bootloader或者是一个bootmanager,通过grub可以引导种类丰富的系统,如linux.freebsd.windows等.但一旦 ...

  7. set names utf8 【mysql导入中文乱码问题解决】

    由于工作的关系需要经常导入一些sql脚本,但是经常会遇到导入中文出现乱码的问题,搞得自己每次导入sql脚本时都很害怕,自己也上网找了一些资料,尝 试了许多办法,有些方法可以正常导入中文,有些办法却不行 ...

  8. 如何让history命令显示最近所执行过的命令的具体执行时间

    如何让history命令显示最近所执行过的命令的具体执行时间. 步骤如下: 1.以ROOT用户编辑/etc/profile文件,在里面加入下面内容(我一般习惯在最末尾加): export HISTTI ...

  9. python 版websocket实现

    ubuntu下python2.76 windows python 2.79, chrome37 firefox35通过 代码是在别人(cddn有人提问)基础上改的, 主要改动了parsedata和se ...

  10. NVIDIA PureVideo Decoder解码器注册码

    http://www.amznz.com/nvidia-purevideo-decoder/ 重装系统后当然得装终极解码来看高清电影,这次为了给喜欢看HD影片的朋友,特意奉上NVIDIA7以上显卡的N ...