<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script src="../day48/jquery-3.2.1.js"></script>

    <title>Title</title>

    <style>

            .outer{

                width: 790px;

                height: 340px;

                margin: 80px auto;

                position: relative;

            }

            .img li{

                 position: absolute;

                 list-style: none;

                 top: 0;

                 left: 0;

            }

           .num{

               position: absolute;

               bottom: 18px;

               left: 270px;

               list-style: none;

           }

           .num li{

               display: inline-block;

               width: 18px;

               height: 18px;

               background-color: white;

               border-radius: 50%;

               text-align: center;

               line-height: 18px;

               margin-left: 4px;

           }

           .btn{

               position: absolute;

               top:50%;

               width: 30px;

               height: 60px;

               background-color: lightgrey;

               color: white;

               text-align: center;

               line-height: 60px;

               font-size: 30px;

               opacity: 0.7;

               margin-top: -30px;

               display: none;

           }

           .left{

               left: 0;

           }

           .right{

               right: 0;

           }

          .outer:hover .btn{

              display: block;

          }

        .num .active{

            background-color: red;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

      <div class="outer">

          <ul class="img">

              <li><a href=""><img src="img/1.jpg" alt=""></a></li>

              <li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li>

              <li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li>

              <li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li>

              <li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li>

              <li class="hide"><a href=""><img src="img/6.jpg" alt=""></a></li>

          </ul>

          <ul class="num">

              <li class="active"></li>

              <li></li>

              <li></li>

              <li></li>

              <li></li>

              <li></li>

          </ul>

          <div class="left  btn"> < </div>

          <div class="right btn"> > </div>

      </div>

<script>

    var i=0;

    //功能1：  鼠标悬浮到图标的位置时实现切换

    $(".num li").mouseover(function () {

          $(this).addClass("active").siblings().removeClass("active");

          var $icon_index=$(this).index();

          i=$icon_index;

          $(".img li").eq($icon_index).removeClass("hide").siblings().addClass("hide")

    });

    // 自动轮播   setInterval(fn,1000)

    function foo() {

         if(i==5){

             i=-1

         }

         i++;

         $(".num li").eq(i).addClass("active").siblings().removeClass("active");

         $(".img li").eq(i).removeClass("hide").siblings().addClass("hide");

    }

    var ID=setInterval(foo,1000);

    //  悬浮终止定时器

        $(".outer").hover(function () {

             // 终止定时器

            clearInterval(ID)

        },function () {

           // 重新开启一个定时器

           ID=setInterval(foo,1500);

        });

    //  通过按钮实现切换

    $(".right").click(function () {

        foo()

    });

    function bar() {

         if(i==0){

             i=6

         }

         i--;

         $(".num li").eq(i).addClass("active").siblings().removeClass("active");

         $(".img li").eq(i).removeClass("hide").siblings().addClass("hide");

    }

     $(".left").click(function () {

        bar()

    })

</script>

</body>

</html>

轮播图

轮播图片文件　　就去京东首页 右击 另存为吧

轮播图jQuery的更多相关文章

  1. 最最最简单的轮播图(JQuery)

    html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. 轮播图(jQuery)

    效果图: -----------------------------------------html------------------------------------------------- ...

  3. jquery一个比较好的轮播图jQuery.kinMaxShow介绍

    kinMaxShow API 可选参数以及详解 kinMaxShow 主参数详解 参数名称 默认值 简单释义 height 500 [整型 (单位:像素)]焦点图高度,必须设置 缺省则启用默认高度 5 ...

  4. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  5. 【jQuery】百分比自适应屏幕轮播图特效

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

  6. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  7. jquery手写焦点轮播图-------解决最后一张无缝跳转第一张的问题

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

  8. jQuery制作焦点图(轮播图)

    焦点图(轮播图) 案例 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  9. jQuery插件slides实现无缝轮播图特效

    初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 1 2 3 4 5 6 7 8 9 10 $(".slideInner").s ...

随机推荐

  1. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  2. 转化Excel表格为php配置文件

    <?php     //建立reader对象 ,分别用两个不同的类对象读取2007和2003版本的excel文件    require("PHPExcel/Reader/Excel20 ...

  3. linux更换shell外壳zsh

    linux-外壳内核与shell的关系 内核处于外壳之中,通过外壳与shell(命令行)交互 外壳可以更换 ############################################## ...

  4. 代码：cookie（一个广告展示例子）

    这个小例子的要求是: 用户第一次进入,显示大图,2秒后大图动画关闭,再把小图动画展开: 用户再次进入后,只显示静态小图. 做法: 定义一个容器 .img201512ad,宽高写死:1190x70.—— ...

  5. 【独家】完美解决appium安装app时，需要手动确认安装的问题

    appium初始化driver时,如果未安装该app会先进行安装,安装时,很多安卓手机都会弹框,需要手动确认安装. 如小米的机器, 这是个头疼的问题,之前在网上找遍了,只有通过adb去点相对坐标成功了 ...

  6. Spring boot 配置文件 使用占位符号

    配置文件占位符 1:使用随机数 ${random.value}.${random.int}.${random.long} ${random.)}.${random.,]} 2: 占位符获取之前配置的值 ...

  7. as3 arguments.callee与... (rest)

    import flash.display.Sprite; var count:int = 1; ArgumentsExample() function ArgumentsExample() { fir ...

  8. storm集群相关资料

    1. Storm集群组件 Storm集群中包含两类节点:主控节点(Master Node)和工作节点(Work Node).其分别对应的角色如下: 主控节点(Master Node)上运行一个被称为N ...

  9. Spring的国际化(转载)

    1:在MyEclipse下面创建一个test的Web  Project,然后添加Spring相关的文件,在src根目录下创建applicationContext.xml文件. applicationC ...

  10. Struts2拦截器的配置

    struts2拦截器interceptor的三种配置方法方法1. 普通配置法 <struts> <package name="struts2" extends=& ...