<!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. 从一个Idea到产品需要经历哪些阶段？

    从一个Idea到产品需要经历哪些阶段? Lkey 07月19日 16:520 现实工作中,不免遇到这样的情况.什么嘛?老板(领导)又有新想法了?又有其他Idea了?心里一阵骂娘xxxxxx.或者产品负 ...

  2. jquery serialize对json的包装用法

    jquery对象.serialize()  可以多用于表单对数据封装提交 能够收表参数,形成一个json格式字符串, 前提是:必须为每一个表单项取一个name属性 对元素 设置 name属性, 然后 ...

  3. HDUOJ----2487Ugly Windows

    Ugly Windows Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  4. 常见Web前端开发笔试题

    1.什么是web标准? WEB标准不是某一个标准,而是一系列标准的集合.网页主要由三部分组成:结构(Structure).表现(Presentation)和行为 (Behavior). 对应的标准也分 ...

  5. shell脚本条件判断

    http://blog.csdn.net/ws_zll/article/details/7515310

  6. 安卓解析 json 4种格式 全解析

    总共4种json  ,    还提供了 httclient  和 httpurlconnection 2种方式获取json的方法(请把baseurl 改为可以地址比如http://www.sohu.c ...

  7. Template Method - 模板方法模式

    1.概述 在面向对象开发过程中,通常我们会遇到这样的一个问题:我们知道一个算法所需的关键步骤,并确定了这些步骤的执行顺序.但是某些步骤的具体实现是未知的,或者说某些步骤的实现与具体的环境相关.例子1: ...

  8. shell 提取mysql指定数据库下表创建语句为单文件

    dbcn="mysql -h172.16.1.194 -uroot -p123456"; db=dsp_ad_center; ii=0; ct=`$dbcn -N -e " ...

  9. MAR 27 解决华为手机访问Google Play:从服务器检索信息时出错。[DF-DFERH-01]

    虽然路由器已经设置了梯子,但是用华为手机访问Google Play时,还是提示:从服务器检索信息时出错.[DF-DFERH-01].   虽然在手机上把梯子设置成全局模式,连接Google Play后 ...

  10. mysql InnoDB 的行锁

    表的引擎类型必须为InnoDB才可以进行此操作. 相关链接:http://www.cnblogs.com/CyLee/p/5579672.html 共享锁:单独运行前两句,然后新建一个会话使用第三句. ...