<!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;
}
ul{
    position:relative;
}
ul li{
    position:absolute;
    top:0;
    left:0;
}
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: #fff;
}
ol li.current{
background-color: pink;
color: #fff;
}
.headle{position: absolute;left:0;z-index:9999;height:60px;width:100%;top:90px;}
.headle a {width:30px;height:30px;background:#000;display:block;color:#fff;text-decoration:none;text-align:center;}
.headle a:nth-child(1){float:left;margin-left:20px;}
.headle a:nth-child(2){float: right;margin-right:20px;}
</style>
</head>
<body>
<div class="wrapper">
<div class="headle"><a href="##" class="lt"><</a><a href="##" class="rt">></a></div>
<ul id="box">
<li style="z-index: 6;"><img src="data:images/1.jpg" alt=""/></li>
<li style="z-index: 5;"><img src="data:images/2.jpg" alt=""/></li>
<li style="z-index: 4;"><img src="data:images/3.jpg" alt=""/></li>
<li style="z-index: 3;"><img src="data:images/4.jpg" alt=""/></li>
<li style="z-index: 2;"><img src="data:images/5.jpg" alt=""/></li>
<li style="z-index: 1;"><img src="data:images/6.jpg" alt=""/></li>
</ul>
<ol style="z-index: 10;" id="uu">
<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公用文件，可上网找 -->
<script src="jquery.js"></script>
<script type="text/javascript">
//fade为立即执行函数，返回值为函数；
var fade = (function() {
var $box = $('#box');
var $uuBox = $('#uu');
var $lt = $('.lt');
var $rt = $('.rt');
var timer = null;
var index = 0;
return {
// 初始化函数
init() {
this.events();
this.autoPlay();
this.goleft();
},
// 鼠标移入按钮时，样式改变，
 
showImage() {
// eq(),寻找下标位置，addClass()添加类名，siblings()寻找除了自身以外，有相同匹配条件的元素；removeClass:移除类名；
$uuBox.children("li").eq(index).addClass('current').siblings().removeClass("current");
//找到相应下标下的元素，选中的淡入，其他相匹配的同级元素淡出
$box.children("li").eq(index).fadeIn().siblings().fadeOut();
 
},
// 设置定时器，自动轮播
autoPlay() {
var _this = this;
// 执行前先关闭定时器
clearInterval(timer)
timer = setInterval(function() {
index++;
if(index == $box.children("li").length) {
index = 0;
}
// 传递一个小标，调用showImage()函数
_this.showImage(index);
},2000)
},
// 添加点击下面按钮时触发的事件
events(){
var _this = this;
$uuBox.children('li').on('click', function() {
// console.log($(this).index());
index = $(this).index();
_this.showImage();
_this.autoPlay();
})
},
goleft(){
var _this = this;
$lt.on('click',function(){
index--;
if(index < 0){
index = 6;
}
_this.showImage(index);
})
}
}
})()
fade.init()
</script>   

jquery淡入淡出轮播图的更多相关文章

  1. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  2. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

  3. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  4. jq交叉淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js中用面向对象的思想——淡入淡出轮播图

    首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换  3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...

  6. vue渐变淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  8. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  9. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

随机推荐

  1. 调试JMETER脚本的5种方法

    如果你曾经设计过JMeter脚本,我敢打赌你至少有一次弄清楚Json Extractor无法正常工作的原因.你猜怎么着?我去过那儿! 你知道为什么最好的JMeter Performance Engin ...

  2. 基于SSL加密的vsftpd 服务器搭建和配置

    基于SSL加密的VSFTPD 服务器搭建和配置 1.安装 ubuntu系统:apt-get install vsftp lftp centos系统:yum install -y vsftpd ftp ...

  3. Luogu P2833 等式 我是傻子x2

    又因为调一道水题而浪费时间...不过细节太多了$qwq$,暴露出自己代码能力的不足$QAQ$ 设$d=gcd(a,b)$,这题不是显然先解出来特解,即解出 $\frac{a}{d}x_0+\frac{ ...

  4. D. Vitya and Strange Lesson

    http://codeforces.com/contest/842/problem/D 1.整体的数组是不用变的,比如数组a[]经过一次询问x后,然后再询问y,相当于询问x ^ y ^ a[i]后的m ...

  5. Java集合——集合框架Map接口

    1.Map接口 public interface Map<K,V>将键映射到值的对象.一个映射不能包含重复的键:每个键最多只能映射到一个值.  2.HashMap.Hashtable.Tr ...

  6. (转)Linux 开机引导和启动过程详解

    Linux 开机引导和启动过程详解 编译自:https://opensource.com/article/17/2/linux-boot-and-startup作者: David Both 原创:LC ...

  7. asp.net mvc网站的发布与IIS配置

    一.安装IIS (如果服务器上已经安装了就跳过) 控制面板——程序——程序功能——打开或关闭windows功能——勾选Inertnet信息服务下面所有选项——确定 二.获取发布文件(如果已经发不好就跳 ...

  8. Oracle11G的用户解锁、卸载以及基础操作

    Oracle用户解锁 [以下操作,必须以超级管理员身份登录,才能修改]oracle安装后,会默认生成很多个用户 以超级管理员身份登录,请注意,其中的空格符:[ sys是一个超级管理员,有最大的权限,d ...

  9. 最简实例演示asp.net5中用户认证和授权(3)

    上接: 最简实例演示asp.net5中用户认证和授权(2) 在实现了角色的各种管理接口后,下一步就是实现对用户的管理,对用户管理的接口相对多一些,必须要实现的有如下三个: 1 public inter ...

  10. 《C#高效编程》读书笔记11-理解短小方法的优势

    我们最好尽可能的编写最清晰的代码,将优化交给JIT编译器完成.一个常见的错误优化是,将大量逻辑放在一个函数中,以期减少额外的方法调用开销.这种将函数逻辑直接写在循环内部的常见优化做法却会降低.NET应 ...