<!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. C++ union使用注意

    union在我们敲代码的时候的使用概率远远小于struct.所以我们常常不太关心她.就知道他是使用内存复用技术.同一个时刻,他仅仅能存在一个成员的值. C中,我们在union中能够包括struct的, ...

  2. linux bash Shell特殊变量：Shell $0, $#, $*, $@, $?, $$和命令行参数

    在linux下配置shell参数说明 前面已经讲到,变量名只能包含数字.字母和下划线,因为某些包含其他字符的变量有特殊含义,这样的变量被称为特殊变量. 例如,$ 表示当前Shell进程的ID,即pid ...

  3. python之函数用法setattr(),了解即可

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法setattr(),了解即可 #http://www.cnblogs.com/hong ...

  4. python之函数用法locals()

    # -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法locals() #locals() #说明:查找局部变量,返回一个名字/值对的字典对 ...

  5. chardet 模块

    #coding:utf-8 #指定本文件编码为utf-8 #python 27 #xiaodeng #chardet模块 #chardet模块下载地址: #1)http://pan.baidu.com ...

  6. http 事务

    #事务#HTTP权威指南 9页一个事务由一条请求命令和一个响应结果组成.这种通信是通过名叫HTTP报文(http message)的格式化数据块进行的

  7. Android学习系列(5)--App布局初探之简单模型

    人类科技的进步源自探索,探索来自于发现本原,当然App布局没这么先进,本文也只是一个归类总结.这篇文章是Android开发人员的必备知识,是我特别为大家整理和总结的,不求完美,但是有用. Androi ...

  8. JMeter学习笔记--JMeter监听器

    监听器(Listeners)是一种展示采样结果的测试元件,采样结果可以通过树.表格.图片加以展示,或者简单地写入某个结果文件之中. 注:不同的监听器通过不同的方式展示服务器响应信息,但它们都将同样的原 ...

  9. [MFC]图形附加alpha透明通道

    改动图形而且附加透明通道: 要附加透明度,能够要把图片转化为32位png图片,然后设置对应的alpha值: 1.      怎样把一张图片改动为32位的Png: a)        读取原图片颜色信息 ...

  10. 修改 Input placeholder 的样式

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } :-moz-placeholder { /* Mozilla Fi ...