<!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. 【协议篇】TCP

    TCP 百科名片 TCP:Transmission Control Protocol 传输控制协议TCP是一种面向连接(连接导向)的.可靠的.基于字节流的运输层(Transport layer)通信协 ...

  2. 【Spark】RDD操作具体解释3——键值型Transformation算子

    Transformation处理的数据为Key-Value形式的算子大致能够分为:输入分区与输出分区一对一.聚集.连接操作. 输入分区与输出分区一对一 mapValues mapValues:针对(K ...

  3. c#委托是什么？事件是不是一种委托？

    C#的委托是CTS(公共类型系统)规定的5中类型之一(类类型.结构类型.接口类型.枚举类型.委托类型).它类似于c或c++中的函数的指针,但函数指针只能引用静态方法,而委托既能引用静态方法,也能引用实 ...

  4. java中相同名字不同返回类型的方法

    这种名字相同返回类型不同的方法,在同一个类中是无法共存的,不论是继承过来的方法,还是多实现过来的方法,在一个类内都无法共存.名字确定了,你能改的只有参数(重载).

  5. Android仿掌上英雄联盟首页，实现折叠效果

    概述 仿掌上英雄联盟首页的demo 详细 代码下载:http://www.demodashi.com/demo/10695.html 首页大概分为几个部分 状态栏 标题栏 轮播图 切换的Tab 资讯列 ...

  6. poj 1156 Palindrome

    Palindrome Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 51631   Accepted: 17768 Desc ...

  7. 【laravel5.4+vue.js】laravel 循环三维数组，解决：htmlentities() expects parameter 1 to be string, array given

    laravel循环三维数组   +++   vue.js循环三维数组  (数据均是以三维数组形式存在的) <form-item label="权限名称" prop=" ...

  8. 【LeetCode】71. Simplify Path

    Simplify Path Given an absolute path for a file (Unix-style), simplify it. For example,path = " ...

  9. Oracle SQL Developer，Oracle 开发工具之toad、SQL Developer、PL/SQL Developer等比较

    参考: oracle 的几个开发工具比较 因Oracle几乎是中大型商业企业数据的首选,所以比较一下常用与Oracle的工具. Oracle SQL Developer 免费,一般开发使用足矣,常用. ...

  10. iOS - App 上架审核被原因拒总结

    1.未遵守苹果 iOS APP 数据储存指导方针 如果你的 App 有离线数据下载功能,尤其需要关注这一点.因为离线数据一般占用存储空间比较大,可以被重新下载和重建,但是用户往往希望系统存储空间紧时也 ...