<!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. Effect

    /////////////////////////////////shader source/////////////////////////////////Texture2D colorMap : ...

  2. django之python网站开发基础

    原文:http://www.cnblogs.com/feixuelove1009/p/5823135.html 一.Django简介 百度百科:开放源代码的Web应用框架,由Python语言编写... ...

  3. Java网络编程详解

    内容: 1.网络通信协议 2.UDP与TCP 3.UDP通信 4.TCP通信 5.网络编程总结 1.网络通信协议 (1)基本概念 网络:由多台计算机以及外部设备连接起来的一个系统,我们称之为网络 通信 ...

  4. (6/24) 插件配置：轻松配置JS文件压缩

    实际开发中,在项目上线之前,我们编写的js代码是需要进行压缩的,我们可以采取压缩软件或者在线进行压缩,这不是我们的重点,在webpack中实现JS代码的压缩才是本节的核心. 通过webpack中可实现 ...

  5. Spring-boot+Mybatis+Maven+MySql搭建实例

    转自:https://www.jianshu.com/p/95fb7be049ae 最近读了spring-boot开发手册,spring-boot相比于spring-mvc封装了很多常用的依赖,并且内 ...

  6. 1.mysql ERROR 1045 (28000): 错误解决办法

    转自:https://www.cnblogs.com/jpwz/p/6061214.html ERROR 1045 (28000): Access denied for user 'ODBC'@'lo ...

  7. 10 python 封装----@property的用法

    1.基本概念 在python中用双下划线开头的方式将属性隐藏起来(设置成私有的) #其实这仅仅这是一种变形操作 #类中所有双下划线开头的名称如__x都会自动变形成:_类名__x的形式: class A ...

  8. 泛型集合与DataSet相互转换

    一.泛型转DataSet /// <summary> /// 泛型集合转换DataSet /// </summary> /// <typeparam name=" ...

  9. win10 ubuntu双系统安装后无法引导进入ubuntu

    之前按照先装windows后装ubuntu的方式装的系统,都可以引导到ubuntu,无论是将ubuntu挂在到/boot在windows用easy BCD建立ubuntu引导,还是将ubuntu挂在到 ...

  10. 【转载】Apache Jena TDB CRUD operations

    Apache Jena TDB CRUD operations June 11, 2015 by maltesander http://tutorial-academy.com/apache-jena ...