<!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. java面试第八天

    异常: 异常的分类 Java会将所有的异常封装成对象,其根本父类为Throwable. Throwable有两个子类:Error 和Exception. Error:一个Error对象表示一个程序错误 ...

  2. win7 mtp

    Sensors MTP Monitor Service 允许MTP设备数据传输,如果该服务被禁用,MTP监视器将不能工作.该服务的默认运行方式是手动,如果你没有使用MTP设备,该功能就可以放心禁用.  ...

  3. c语言入门经典(第5版)

    文章转载:http://mrcaoyc.blog.163.com/blog/static/23939201520159135915734 文件大小:126MB 文件格式:PDF    [点击下载] C ...

  4. cygwin完全安装步骤方法(组图)

    我们可以到Cygwin的官方网站下载Cygwin的安装程序,地址是: http://www.cygwin.com/ 或者直接使用下载连接来下载安装程序,下载连接是: http://www.cygwin ...

  5. cxf之org.xml.sax.SAXParseException; lineNumber: 7; columnNumber: 37; cvc-complex-type.2.4.c: 通配符的匹配很全面, 但无法找到元素 'jaxws:server' 的声明。

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  6. HDUOJ----John

    John Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Total Submis ...

  7. Windows下面安装和配置Solr 4.9(一)

       1.Solr下载 下载地址 :http://lucene.apache.org/solr/   2.解压,测试 在example文件夹中找到start.jar文件,用命令提示符运行这个文件:ja ...

  8. HDFS权限管理用户指南

    原文地址:http://hadoop.apache.org/docs/r1.0.4/cn/hdfs_permissions_guide.html 概述 用户身份 理解系统的实现 文件系统API变更 S ...

  9. Python练习笔记——编写一个阶乘函数

    当输入一个数字时,函数自动计算该数的 阶乘 def factorial(num): j = 1 for i in range(1,num+1): j = j*i print(j) num = int( ...

  10. PLSQL_SQL Loader的概念和用法(概念)

    2014-06-08 Created By BaoXinjian