<!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. PHP $_GET

    $_GET 变量用于收集来自 method="get" 的表单中的值. $_GET 变量 $_GET 变量是一个数组,内容是由 HTTP GET 方法发送的变量名称和值. $_GE ...

  2. windows 批处理设置环境变量

      windows通过批处理设置环境变量 CreateTime--2017年8月4日11:28:11Author:Marydon 参考链接:https://wenku.baidu.com/view/a ...

  3. 实现锁死的有滚动条的div的表格(datagird)

    JS框架使用Jquery 最终效果: 代码结构: 代码: <HEAD><TITLE>new document</TITLE> <META name=Gener ...

  4. 新浪微博API使用初步介绍——解决回调地址的问题

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #新浪微博API使用初步介绍——解决回调地址的问题 #http://blog.csdn.net/monsion ...

  5. 微信小程序裁剪图片成圆形

    代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在gith ...

  6. 转：PHP关于反斜杠处理函数addslashes()和stripslashes()的用法

    1.php处理\函数:addslashes()和stripslashes()函数 addslashes():对输入字符串中的某些预定义字符前添加反斜杠,这样处理是为了数据库查询语句等的需要.这些预定义 ...

  7. java.lang.NoClassDefFoundError: Could not initialize class com.demo.jdbc.utils.MyJdbcUtils

    jdbc编写工具类的过程中测试失败, 出现如下错误:   原因:初始化的过程中执行静态代码块的过程中出现错误, 也就是说, 加载配置文件错误: 没有加载到指定路径的配置文件. 我的MyJdbcUtil ...

  8. JavaScript 设计模式之建造者模式

    一.建造者模式概念解读 1.建造者模式概念文字解读 建造者模式可以将一个复杂对象的构建与其表示分离,使得同样的构建过程可以创建不同的表示.也就是说如果我们用了建造者模式,那么用户就需要指定需要建造的类 ...

  9. javascript高级程序设计第一章

    看后总结: 1.javascript的组成成分:ECMAscript+DOM+BOM

  10. 【js】replace()

    replace方法的语法是: stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正则表达式对象(RegExp) ...