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">&lt;</a>

             <a href="javascript:void(0);" class="rightBtn" id="rightBtn">&gt;</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>  <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> < ...

随机推荐

redis参数配置说明
参数说明redis.conf 配置项说明如下:1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no2. 当Redis以守护进程方式运行 ...
人工智能技术实践篇：espeak开发环境调试
一.前言 1.espeak版本: espeak-1.48.04-source 2.开发环境:VC+2015 二.正文 2.1 错误提示 LNK1104: cannot open file 'LIBC. ...
创建access数据库表demo的封装
1.创建类 public void CreateBiao(ADOX.Catalog catlog,ADOX.Table table) { //StuId Column(AutoIncrement ) ...
redis中使用 check-and-set 操作实现乐观锁
WATCH 命令可以为 Redis 事务提供 check-and-set (CAS)行为. 被 WATCH 的键会被监视,并会发觉这些键是否被改动过了. 如果有至少一个被监视的键在 EXEC 执行之前 ...
Prism for WPF再探（基于Prism事件的模块间通信）
上篇博文链接 Prism for WPF初探(构建简单的模块化开发框架) 一.简单介绍: 在上一篇博文中初步搭建了Prism框架的各个模块,但那只是搭建了一个空壳,里面的内容基本是空的,在这一篇我将实 ...
javascript01
手敲代码01 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
详解PHP反射API
PHP中的反射API就像Java中的java.lang.reflect包一样.它由一系列可以分析属性.方法和类的内置类组成.它在某些方面和对象函数相似,比如get_class_vars(),但是更加灵 ...
CentOS7.2 使用Shell安装Oracle12c
一.操作系统说明 1.操作系统版本 2.磁盘分区用量二.安装必要的软件包 for pkg in 'binutils' 'compat-libcap1' 'compat-libstdc++-33' ...
Python个人项目--豆瓣图书个性化推荐
项目名称: 豆瓣图书个性化推荐需求简述:从给定的豆瓣用户名中,获取该用户所有豆瓣好友列表,从豆瓣好友中找出他们读过的且评分5星的图书,如果同一本书被不同的好友评5星,评分人数越多推荐度越高. 输入: ...
crontabs linux定时任务功能安装
crontab命令常见于Unix和Linux的操作系统之中,用于设置周期性被执行的指令.该命令从标准输入设备读取指令,并将其存放于"crontab"文件中,以供之后读取和执行.通常 ...

jq交叉轮播图变种【闪一下黑】

jq交叉轮播图变种【闪一下黑】的更多相关文章

随机推荐

热门专题