jQuery的fadeIn和fadeOut实现的轮播图
<!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实现的轮播图的更多相关文章
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- jQuery淡入淡出效果轮播图
用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...
- jQuery制作焦点图(轮播图)
焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- jQuery轮播图--不使用插件
说明:引入jquery.min.js 将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- jquery优化轮播图2
继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- jquery改造轮播图1
g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...
- jQuery轮播图（二）利用构造函数和原型创建对象以实现继承
本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...
- jQuery轮播图（一）轮播实现并封装
利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...
随机推荐
- 1z0-052 q209_11
11: Your database instance is started using the server parameter file (SPFILE). You executed a comma ...
- @Value 配置bean的方法
- webservice系统学习笔记9-使用契约优先的方式的一个服务端demo(隐式传Header信息)
服务器端: 1.编写wsdl文件 <?xml version="1.0" encoding="UTF-8" standalone="no&quo ...
- Loadrunner脚本编程（3）- 检查点，关联等函数
http://www.360doc.com/content/10/0806/13/1698198_44078093.shtml 1． 错误预防和恢复 参数默认是用{}括起来的,但也可以指定用< ...
- MySQL5.7.18基于GTID的主从复制过程实现
GTID是5.6时加入的,在5.7中被进一步完善,生产环境建议在5.7版本中使用.GTID全称为Global Transaction Identifiers,全局事务标识符.GTID的复制完全是基于事 ...
- 让 linux centos 文件夹地址栏 位置栏显示出来的方法
今天又拿起心爱的 linux ,发现多日不用又忘记了不少知识了 , 发现忘记的速度真是惊人的! 设置方法: 编辑-> 首选项-> 勾选 总是在浏览器窗口中打开, 如图:
- IOS 进阶之 WKWebView
前言 Xcode8发布以后,编译器开始不支持IOS7,所以很多应用在适配IOS10之后都不在适配IOS7了,其中包括了很多大公司,网易新闻,滴滴出行等.因此,我们公司的应用也打算淘汰IOS7. 支持到 ...
- 手机imie号介绍使用
http://zhidao.baidu.com/question/3682744.html手机机身号又叫手机串号,是国际移动设备识别码,GSM手机机身号简称IMEI,CDMA手机机身号简称ESN. 一 ...
- eclipse3.3插件更新攻略
eclipse有种在线(需有网络)安装插件方法,随着eclipse版本的不同,UI会有所改变.这里记录下e3.3的安装方法 1.选择Find and Install(查找并且安装)选项 ...
- PowerDesigner删除外键关系,而不删除外键列[转]
PowerDesigner中配置外键关系时,如果要删除配置的外键关系,默认设置会一同删除外键列. 要更改此设置,需在菜单栏tools中打开Model Options,在Model Settings中点 ...