jq交叉淡入淡出轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color:#333;
}
.carousel{
width: 900px;
height: 540px;
border: 1px solid #000;
margin:50px auto;
position: relative;
}
.carousel .imgs ul li{
position: absolute;
left:0;
top:0;
width: 900px;
height: 540px;
display: none;
}
.carousel .imgs ul li:first-child{
display: block;
}
.carousel .btns a{
position: absolute;
top:50%;
margin-top: -30px;
width: 30px;
height: 60px;
text-align: center;
line-height: 60px;
font-size: 20px;
background-color: rgba(0,0,0,.6);
color:#fff;
}
.carousel .btns a.leftBtn{
left:10px;
}
.carousel .btns a.rightBtn{
right: 10px;
}
.carousel .circles{
width: 200px;
height: 20px;
position: absolute;
left:50%;
margin-left: -100px;
bottom: 30px;
}
.carousel .circles ol li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 10px;
background-color: orange;
color:#000;
text-align: center;
line-height: 20px;
}
.carousel .circles ol li.cur{
background-color: red;
}
.carousel .circles ol li:last-child{
margin-right: 0;
} </style>
</head>
<body>
<div class="carousel" id="carousel">
<div class="imgs" id="imgs">
<ul>
<li><a href=""><img src="data:images/aoyun/0.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/aoyun/1.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/aoyun/2.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/aoyun/3.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/aoyun/4.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/aoyun/5.jpg" alt=""></a></li>
<li><a href=""><img src="data:images/aoyun/6.jpg" alt=""></a></li>
</ul>
</div>
<div class="btns">
<a href="javascript:void(0);" class="leftBtn" id="leftBtn"><</a>
<a href="javascript:void(0);" class="rightBtn" id="rightBtn">></a>
</div>
<div class="circles" id="circles">
<ol>
<li class="cur">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ol>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 获取元素
var $carousel = $("#carousel");
var $imgLis = $("#imgs ul li");
var $leftBtn = $("#leftBtn");
var $rightBtn = $("#rightBtn");
var $circlesLis = $("#circles ol li");
var amount = $imgLis.length; // 信号量
var idx = 0; // 定时器
var timer = setInterval(rightBtnFun,3000); // 鼠标进入停止定时器
$carousel.mouseenter(function(){
clearInterval(timer);
}); // 鼠标离开重新开启定时器
$carousel.mouseleave(function(){
// 设表先关
clearInterval(timer);
timer = setInterval(rightBtnFun,3000);
}); // 右按钮点击事件
$rightBtn.click(rightBtnFun); // 右按钮的点击事件
function rightBtnFun(){
// 防流氓
if($imgLis.is(":animated")){
return;
}
// 老图消失
$imgLis.eq(idx).fadeOut(500);
// 信号量改变
idx ++;
if(idx > amount - 1){
idx = 0;
}
// 新图淡入
$imgLis.eq(idx).fadeIn(1000);
// 小圆点改变
$circlesLis.eq(idx).addClass("cur").siblings().removeClass("cur");
} // 左按钮点击事件
$leftBtn.click(function(){
// 防流氓
if(!$imgLis.is(":animated")){
// 老图消失
$imgLis.eq(idx).fadeOut(500);
// 信号量改变
idx --;
if(idx < 0){
idx = amount - 1;
}
// 新图淡入
$imgLis.eq(idx).fadeIn(1000);
// 小圆点改变
$circlesLis.eq(idx).addClass("cur").siblings().removeClass( "cur");
};
}); // 小圆点事件
$circlesLis.mouseenter(function(){
// 老图淡出
$imgLis.eq(idx).stop(true).fadeOut(500);
// 信号量改变
idx = $(this).index();
// 新图淡入
$imgLis.eq(idx).stop(true).fadeIn(1000);
// 校园点改变
$(this).addClass("cur").siblings().removeClass("cur");
}); </script>
</body>
</html>
jq交叉淡入淡出轮播图的更多相关文章
- js渐隐渐现透明度变化淡入淡出轮播图
js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...
- jQuery淡入淡出轮播图实现
大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- jquery淡入淡出轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js中用面向对象的思想——淡入淡出轮播图
首先看下效果图 明确功能 1.前后切换(边界判断) 2.按键切换 3.自动轮播 css代码 <style> * {margin:0; padding:0;} li{list-style: ...
- vue渐变淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQ实现的一个轮播图
众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...
- 基于JQ的简单左右轮播图
// 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...
- js+jq 淡入淡出轮播（点击+定时+鼠标进入移出事件）
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...
随机推荐
- Linux基础：文件查找find
写在前面 在linux的日常管理中,find的使用频率很高,熟练掌握对提高工作效率很有帮助. find的语法比较简单,常用参数的就那么几个,比如-name.-type.-ctime等.初学的同学直接看 ...
- java注解细节
现在很多框架都使用注解了,典型的像Spring里面就可以看到大量的注解,比如@Service,@Controller这一类的都是注解.注解Annotation是java一项很重要的功能.下面就来整理一 ...
- flask开发没有解决的bug记录
sqlalchemy.exc.InvalidRequestError sqlalchemy.exc.InvalidRequestError: This Session's transaction ha ...
- 对Java中多态，封装，继承的认识（重要）
一.Java面向对象编程有三大特性:封装,继承,多态 在了解多态之前我觉得应该先了解一下 ...
- 【python】字符串
>>> str1="welcom to China">>> str1[2:4]'lc'>>> str1[7]'t'>&g ...
- springboot 入门七-静态资源处理
Spring Boot 默认配置的/**映射到/static(或/public ,/META-INF/resources),/webjars/**会映射到classpath:/META-INF/res ...
- 栈stack（2）：栈的链表实现
定义 从上一篇我们知道,栈(stack)是一个只允许一端进行删除插入操作的线性表.同时,我们联想到线性表的链式结构,其特点是用一组任意的存储单元存储线性表的数据元素,因此我们选择使用链表去实现栈,规定 ...
- Structural Inference of Hierarchies in Networks(网络层次结构推断)
Structural Inference of Hierarchies in Networks(网络层次结构推断) 1. 问题 层次结构是一种重要的复杂网络性质.这篇文章给出了层次结构的精确定义,给出 ...
- lesson - 2 笔记 yum /single /rescue /
一. yum 作用: yum 命令是在Fedora 和RedHat 以及SUSE 中基于rpm 的软件包管理器,它可以使系统管理人员交互和自动化地更新与管理R ...
- Node.js 蚕食计划（一）—— 模块化编程
众所周知,Node.js 的出现造就了全栈工程师,因为它让 JavaScript 的舞台从浏览器扩大到了服务端 而 Node.js 的强大也得益于它庞大的模块库,所以学习 Node.js 第一步还得从 ...