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> ...
随机推荐
- 【quickhybrid】API的分类：短期API、长期API
前言 一切就绪,开始规划API,这里在规划前对API进行了一次分类:短期API.长期API 首先申明下,这个是在实际框架演变过程中自创的一个概念,其它混合框架可能也会有这个概念,但应该是会在原生底层来 ...
- 自学WPF之Binding（一）
Binding的重要性就不作介绍了,是作为数据交互的支撑,下面来介绍一下为Binding指定源(Source)的几种方法: 把普通CLR类型的单个对象指定为Source:包括.NET Framewor ...
- windows 下使用VMware Workstation Pro 工具，ubuntu创建虚拟机
本文记录windows 下使用VMware Workstation Pro 工具,ubuntu创建虚拟机 的步骤 第一步 [文件] --- [新建虚拟机] 第二步 弹出的新建虚拟机向导对话框 标准 ...
- jenkins学习之多项目构建
多项目构建,即指的是同时构建多个源代码中的项目,我所知道的有两种方法,一种是在某个项目“构建完成后操作”中设置如下: 另外一种是借助于插件——Multijob plugin,如下: 使用方法其实比较简 ...
- shell编写mysql抽取数据脚本
#!/bin/bash DT=`date +%Y%m%d` #当前日期YESTERDAY=`date -d "yesterday" +%Y-%m-%d` #昨天,用于处理数据的日期 ...
- 分享一个开源免费、目前最好的API接口管理平台----eoLinker
一.概况 eoLinker 是目前业内领先.国内最大的在线 API 接口管理平台,提供自动生成 API 文档.API 自动化测试.Mock 测试.团队协作等功能,旨在解决由于前后端分离导致的开发效率低 ...
- C#应用程序隐藏调用bat脚本
做c#应用程序有些调用windows自带的bat脚本会比较方便 Process proc; proc = null; try { string targetDir = GetParentUrl() + ...
- spring boot https --restful接口篇
我们写的接口默认都是http形式的,不过我们的接口很容易被人抓包,而且一抓全是明文的挺尴尬的 spring boot配置https生成证书大的方向有3种: 1.利用keytool自己生成证书 2.从免 ...
- 【CSS3】字体font
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- boost::algorithm(字符串算法库)
没什么说的,需要 #include<boost/algorithm/string.hpp> 1.大小写转换 std::string s("test string"); ...