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> ...
随机推荐
- 【转】Spring 中三种Bean配置方式比较
今天被问到Spring中Bean的配置方式,很尴尬,只想到了基于XML的配置方式,其他的一时想不起来了,看来Spring的内容还没有完全梳理清楚,见到一篇不错的文章,就先转过来了. 以前Java框架基 ...
- linux应用态下的时间
1.时间值 1.1 日历时间(UTC) 该值是自1 9 7 0年1月1日0 0 : 0 0 : 0 0以来国际标准时间( U T C)所经过的秒数累计值(早期的手册称 U T C为格林尼治标准时间) ...
- Bandit Wargame Level18 Writeup(interactive shell and .bashrc )
Bandit Level 18 → Level 19 Level Goal The password for the next level is stored in a file readme in ...
- SoapUI模拟REST MockService
一.新建REST工程 二.添加URI 物流查询接口测试地址:http://www.kuaidi100.com/query?type=快递公司代号&postid=快递单号 三.输入入参,测试一下 ...
- JS判断终端
//判断手机终端 if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)) { window.location.href = 'mobil ...
- 小白的Python之路 day4 装饰器高潮
首先装饰器实现的条件: 高阶函数+嵌套函数 =>装饰器 1.首先,我们先定义一个高级函数,去装饰test1函数,得不到我们想要的操作方式 import time #定义高阶函数 def deco ...
- 浅谈，html\css脱离标准文档流相关
(个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行. 本来在标准文档流下,各个元素相 ...
- bzoj 2752: [HAOI2012]高速公路(road)
Description Y901高速公路是一条重要的交通纽带,政府部门建设初期的投入以及使用期间的养护费用都不低,因此政府在这条高速公路上设立了许多收费站.Y901高速公路是一条由N-1段路以及N个收 ...
- php程序员面试经验
面试是你进入公司的第一个关卡,面试过后还会有试用期.可有时候总有那么一些人对待面试完全没人任何防备. 如果你想进入一家优秀的企业,那么对于面试你一定要做好十足的准备.为什么说了:"将军不打没 ...
- python （5分钟实现一个游戏的屏蔽敏感字系统，）
import datetime time=datetime.datetime.now() dirty= ['fuck','狗日的','犊子','麻批','仙人板板','R你妈','操你','草你',' ...