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;
/*给大盒子加蒙版*/
background-color: rgba(0,0,0,.7);
}
.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,function(){
// 信号量改变
idx ++;
if(idx > amount - 1 ){
idx = 0;
}
// 新图淡入
$imgLis.eq(idx).fadeIn(800);
// 小圆点改变
$circlesLis.eq(idx).addClass("cur").siblings().removeClass("cur");
});
} // 左按钮的点击事件
$leftBtn.click(function(){
// 防流氓
if(!$imgLis.is(":animated")){
// 老图完全淡出新图进来
$imgLis.eq(idx).fadeOut(500,function(){
// 信号量改变
idx --;
if(idx < 0){
idx = amount - 1;
}
// 新图淡入
$imgLis.eq(idx).fadeIn(800);
// 小圆点改变
$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(800);
// 小圆点
$(this).addClass("cur").siblings().removeClass("cur"); }); </script>
</body>
</html>
jq交叉轮播图变种【闪一下黑】的更多相关文章
- jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- JQ万能轮播图
lunbotu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- jq龙禧轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- jq版轮播图
html部分 <div class="banner"> <ul class="img"> <li><img src=& ...
- HTML+jq简单轮播图
.main{ width: 100%; min-width: 1100px; display: table; margin: 0 auto; text-align: ce ...
- jQ实现的一个轮播图
众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...
随机推荐
- intellij安装lombok插件,解决注解@Slf4j注入后找不到变量log
1.进入设置 2.搜索插件 3.安装
- Oracle数据库（一）概述、基础与简单操作
数据库: 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库. 数据库分类: 关系型数据库 非关系型数据库 数据库 类型 特性 优点 缺点 关系型数据库 SQLite.Oracle. ...
- 函数PYXX_READ_PAYROLL_RESULT的dump问题
发现有两个HR的后台定时任务出现dump,日志表示,是PYXX_READ_PAYROLL_RESULT产生了类型冲突的异常CX_SY_DYN_CALL_ILLEGAL_TYPE. 日志标题部分: 类别 ...
- Spring（概念）
在本文中只讲述一些概念性的东西,因为我在开始学习JAVA的时候对这些概念性的东西总是不太理解,总结总结再感悟一下,也方便后人. 理解的不深,用通俗的语言讲一下: 百度百科这样介绍: spring框架主 ...
- 为了CET-4！
Directions For tiis part,you are allowed 30 minutes to write an essay.Suppose there are two options ...
- [置顶]
xamarin android使用zxing扫描二维码
好久没写了,这片文章篇幅不长,概述一下在xamarin android中用 ZXing.Net.Mobile库扫描二维码读取url的示例.扫码支付,扫码登录,App上各种各样的扫码,好像没个扫码的就有 ...
- Xamarin Android自定义文本框
xamarin android 自定义文本框简单的用法 关键点在于,监听EditText的内容变化,不同于java中文本内容变化去调用EditText.addTextChangedListener(m ...
- ArcGIS 网络分析[8] ArcObjects二次开发之底层网络分析开发
基于现有的线要素类.转弯要素类(在地理数据库的要素数据集中),要用AO做两件事: 1. 创建网络数据集(使用Geodatabase类库) 2. 执行网络分析(使用NetworkAnalyst类库) 在 ...
- BZOJ 4816 数字表格
首先是惯例的吐槽.SDOI题目名称是一个循环,题目内容也是一个循环,基本上过几年就把之前的题目换成另一个名字出出来,喜大普奔亦可赛艇.学长说考SDOI可以考出联赛分数,%%%. 下面放解题报告.并不喜 ...
- [编织消息框架][传输协议]sctp
OSI(Open System Interconnect),即开放式系统互联. 一般都叫OSI参考模型,是ISO(国际标准化组织)组织在1985年研究的网络互联模型. 该体系结构标准定义了网络互连的七 ...