<!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. AFNetworkingErrorDomain 错误解决方法

    首先我们来看一下错误信息: Error Domain=AFNetworkingErrorDomain Code=-1011 "Expected status code in (200-299 ...

  2. Vue基础知识之组件及组件之间的数据传递（五）

    vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...

  3. QEMU,KVM及QEMU-KVM介绍

    What's QEMU QEMU是一个主机上的VMM(virtual machine monitor),通过动态二进制转换来模拟CPU,并提供一系列的硬件模型,使guest os认为自己和硬件直接打交 ...

  4. [Python] 牛顿插值

    插值公式为: 差商递归公式为: # -*- coding: utf-8 -*- #Program 0.4 Newton Interpolation import numpy as np import ...

  5. MYSQL体系结构-来自期刊

    MySQL三层体系结构 |-----------------------------------------------------------------------------------| | ...

  6. 15.python操作mysql

    导入包 from pymysql import* 1. 创建 Connection 连接 conn=conne(host='192.168.13.130',port=3306 ,database='' ...

  7. DC组策略相关

    恢复DC组策略默认配置 DcGPOFix [/ignoreschema] [/Target: Domain | DC | BOTH] dcgpofix /? gpupdate刷新 gpedit.msc ...

  8. 表格(table)

    Title 主机名 端口 操作 1111 10023 查看详情 修改 表头1 表头1 表头1 表头1 1 1 1 1 1 1 1 1 1 <!DOCTYPE html><html l ...

  9. eclipse 断点找到同名的其它类

    转载自Eclipse断点进入另一个项目的同名Java文件中(http://tunps.com/p/11789.html) eclipse 断点找到同名的其它类 A和B是两个相同的项目,A一直本地,B是 ...

  10. 基于OpenGL编写一个简易的2D渲染框架-01 创建窗口

    最近正在学习OpenGL,我认为学习的最快方法就是做一个小项目了. 如果对OpenGL感兴趣的话,这里推荐一个很好的学习网站 https://learnopengl-cn.github.io/ 我用的 ...