<!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. abp架构中加载公共css样式表和公共js的文件目录位置

    src\shared\helpers\LocalizedResourcesHelper.ts

  2. docker nginx部署.net core后端站点和angular前端站点

    首先声明,服务器是linux 版本是ubuntu server 18.04,不是windows server.windows server 2016放弃治疗了,2019可能会有改善,不过云厂商的公共镜 ...

  3. POI Java 导出数据到Excel

    <dependency> <groupId>com.alibaba</groupId> <artifactId>fastjson</artifac ...

  4. Java多线程与并发——线程生命周期和线程池

    线程生命周期:  线程池:是预先创建线程的一种技术.线程池在还没有任务到来之前,创建一定数量的线程,放入空闲队列中,然后对这些资源进行复用.减少频繁的创建和销毁对象. java里面线程池的顶级接口是E ...

  5. 27 个Jupyter Notebook的小提示与技巧

    不多说,直接上干货! 见 http://liuchengxu.org/pelican-blog/jupyter-notebook-tips.html

  6. mybatis + log4j2 问题 java.lang.NoClassDefFoundError: org/apache/logging/log4j/spi/AbstractLoggerWrapper

    root cause java.lang.NoClassDefFoundError: org/apache/logging/log4j/spi/AbstractLoggerWrapper 网上资料比较 ...

  7. 使用URLRewriter实现URL重写

    优点 1)隐藏真实URL,提高安全性 2)更加友好的URL,好记(看博客园就行知道啦) 3)便于搜素引擎收录 ......... 可能的缺点 使用URL重写可能导致: 1)图片路径的问题 2)CSS路 ...

  8. servlet传值到servlet传值问题

    今天在项目中遇到一个问题:中期项目自己做的新闻部分NewsPagerSortservlet传值时,正确答案如下 if(title!=""){ resp.sendRedirect(& ...

  9. Android在应用设置里关闭权限，返回生命周期处理

    问题 在处理6.0运行时权限时,很多人都忽略了这样一个问题: 在一个App应用里,如果已经允许了一个权限比如(读取通讯权限),此刻去调用相机,弹出权限申请对话框,此刻点击拒绝,然后经过处理后弹出去设置 ...

  10. SpringEL和资源调用

    Spring EL-Spring表达式语言,支持在xml和注解中使用表达式,类似于JSP的EL表达式语言. Spring开发中经常涉及调用各种资源的情况,包含普通文件.网址.配置文件.系统环境变量等, ...