<!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交叉轮播图变种【闪一下黑】的更多相关文章

  1. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  3. JQ万能轮播图

    lunbotu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8">  ...

  4. jq龙禧轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

  6. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  7. jq版轮播图

    html部分 <div class="banner"> <ul class="img"> <li><img src=& ...

  8. HTML+jq简单轮播图

    .main{    width: 100%;    min-width: 1100px;    display: table;    margin: 0 auto;    text-align: ce ...

  9. jQ实现的一个轮播图

    众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...

随机推荐

  1. mysql还原数据库时，提示ERROR 1046 (3D000) No database selected 的解决方法

    使用mysql数据库的朋友, 经常会使用mysqldump备案数据库, 然后到新服务器还原, 这个过程中, 有朋友会遇到ERROR 1046 (3D000)  No database selected ...

  2. Asp.Net Web API（六）

    Asp.Net Web API不可以需要IIS.可以自己在主机上承载一个Web API 创建WebAPI.Server项目 创建一个控制器项目的服务端 在Nuget中添加Microsoft.AspNe ...

  3. 掌握numpy(二)

    目录 掌握numpy(一) 掌握numpy(二) 掌握numpy(三) 掌握numpy(四) 数组的reshape 顾名思义,就是对数组的形状进行改变,比如行变成列,一行变多行等. in place ...

  4. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  5. 回顾2017系列篇（二）：移动端APP设计趋势

    移动端APP在2017年经历了诸多的变化, 人工智能.聊天式的界面.响应式设计.虚拟现实(VR)和增强现实(AR)让设计师不断面临新的挑战.研究表明,用户每天耗费在手机和平板上的平均时长为158分钟, ...

  6. 使用Vue2完成“小红书” app

    小红书项目说明 整体页面格调.功能和原版 app 无限接近.具体页面细节可以下载 “小红书” app查看. 图片素材:https://pan.baidu.com/s/1qYOcx7e 整体要求: · ...

  7. bzoj 4012: [HNOI2015]开店

    Description 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到 人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的 想法当然非常好啦,但是她们也发现 ...

  8. raspberrypi 3代B 配置摄像头

    raspberrypi 3代B 配置摄像头 硬件环境: 树莓派3B (element 14版) 树莓派3夜视摄像头800万像素(element 14版) 金士顿 64GB TF Class 10 UH ...

  9. Java企业微信开发_11_异常：java.net.UnknownHostException: qyapi.weixin.qq.com

    原因: 网络原因导致 dns解析失败. 解决方案: 方案一 : 1.查看你的服务器能否ping通外网,不过不行说明你的网络出了问题.     (我的情况是客户的应用服务器只能内网访问,所以是网络出问题 ...

  10. 点击盒子选中里面的单选框，并给盒子添加相应样式，美化单选框、复选框样式css用法，响应式滴

    pc效果图: 移动端效果图: 代码直接上: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...