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> ...
随机推荐
- Intellij IDEA 使用小结
快捷键 核心快捷键 IntelliJ IDEA 作为一个以快捷键为中心的 IDE,为大多数操作建议了键盘快捷键.在这个主题中,您可以找到最不可缺少的列表,使 IntelliJ IDEA 轻松实现第一步 ...
- sqlser 2005 对称加密，非对称加密笔记
一:对称加密 原始明文---密钥---加密数据---密钥---原始明文 速度快,通过算法将明文混淆,占用系统资源少 二:非对称加密 加密解密速度慢,较高的系统资源占用 三:混合数据加密 加密过程:随 ...
- IntelliJ IDEA 环境常用设置整理
1.修改为Eclipse快捷键 File -> Settings -> Keymap => Keymaps改为 Eclipse copy 2.显示行号: File -> S ...
- C#：CsvReader读取.CSV文件并转换成DataTable
原文引用:https://www.codeproject.com/Articles/9258/A-Fast-CSV-Reader using LumenWorks.Framework.IO.Csv; ...
- 【java提高】Serializable(一)--初步理解
Serializable(一)--初步理解 一 序列化是干什么的? 我们知道,在jvm中引用数据类型存在于栈中,而new创建出的对象存在于堆中.如果电脑断电那么存在于内存中的对象就会丢失.那么有没有方 ...
- magento获取商品的图片
获取商品的图片主要从catalog_product_entity_media_gallery 表中 该表中各列的属性代表 value_id:记录 ID,可以留空让数据库自动生成. attribute_ ...
- python基础知识——字符串详解
大多数人学习的第一门编程语言是C/C++,个人觉得C/C++也许是小白入门的最合适的语言,但是必须承认C/C++确实有的地方难以理解,初学者如果没有正确理解,就可能会在使用指针等变量时候变得越来越困惑 ...
- mysql5.7-Group Replication
什么是Group Replication 基于组的复制(Group-based Replication)是一种被使用在容错系统中的技术.Replication-group(复制组)是由能够相互通信的多 ...
- bzoj 2733: [HNOI2012]永无乡
Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...
- Django2.0中文文档
title: Django2.0中文文档 tags: Python,Django,入沐三分 grammar_cjkRuby: true --- Django2.0版本已经发布了,我们先来看一个图片 从 ...