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 ...
随机推荐
- java面试第十天
JFC:java基础类库(具体的类可以查看API文档) 观察者模式: 事件监听者对事件源进行监听,事件源会发生某些事件,监听者需要对事件作出相应的处理. 事件监听者(Observer): 处理事件 事 ...
- MySQL 联合索引测试
搭建测试环境 1:创建表 CREATE TABLE tab_index (id int(5), age int(3), dte datetime); 2:插入测试数据 INSERT INTO tab_ ...
- react 引入 json
1.对 json 里面的数据进行增删改查
- systemctl的常用命令
#systemctl #systemctl --all #systemctl list-units --type=sokect #systemctl list-units --type=service ...
- maven Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4
maven Failed to execute goal org.apache.maven.plugins:maven-surefire-plugin:2.12.4 CreateTime--201 ...
- HTTP报文01
#xiaodeng #HTTP报文01 #HTTP权威指南 45 报文向下游流动- 不管是请求报文还是响应报文,所有报文都会向下游流动. 所有报文的发送者都在接收者的上游. 报文的组成部分 对报文进行 ...
- 获取泛型类对应的class类型
自己写来备忘的,如有错误,请指正! public class Demo<T> { private Class<T> clazz; public Demo() { Paramet ...
- &和&&的一点区别
&两边的语句都会执行,&&有可能只执行左边的语句. &做位运算与的时候可以更高效的判断一个数字是不是奇数. 1&1 = 1 0&1 = 0 所以和1与结 ...
- CentOS 6.5上使用gdb调试时出现Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.132.el6.i686 .
在CentOS6.5上用gdb调试时提示Missing separate debuginfos, use: debuginfo-install glibc-2.12-1.132.el6.i686先修改 ...
- Java优化技巧
过早的优化是万恶之源. 优化了的代码可读性变差,可改性可适应性变差,可维护性变差. 远离过度优化,优化是个无底洞,把主要精力放在代码逻辑上. 优化的代码是活在当下的,是严重依赖硬件的,不利于表达永恒的 ...