<!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. Linux入门之vi

    How to Use the vi Editor* *Copyright 1991 by Simon Fraser University. Reprinted with permission. The ...

  2. tornado-简单的服务器非阻塞

    1.服务器 非阻塞 import tornado.ioloop import tornado.web import tornado.httpserver # 非阻塞 import tornado.op ...

  3. 0_Simple__simpleMultiCopy

    利用 CUDA 的 Overlap 特性同时进行运算和数据拷贝来实现加速. ▶ 源代码.使用 4 个流一共执行 10 次 “数据上传 - 内核计算 - 数据下载” 过程,记录使用时间. #includ ...

  4. leetcode485

    public class Solution { public int FindMaxConsecutiveOnes(int[] nums) { ; ; ; i < nums.Length; i+ ...

  5. WebService客户端调用的几种方式

    1.用组件HTTPRIO,支持VCL WIN32和FIRE MONKEY跨平台Android手机 HTTPRIO1.URL := 'http://127.0.0.1:8080/soap/IsoapTe ...

  6. python 网页爬虫，下载网络图片

    # coding=utf-8 import lxml,bs4,re,requests csvContent='' file = open('D:\\tyc_demo.html','rb') soup ...

  7. Eclipse 更改Maven项目名

    1. 在Eclipse 中修改项目名 没错这种方法跟你预料的一样简单,当项目已经导入到 Eclipse 之后,只需要做两个事情 1.1 改项目文件夹名称 选中项目,按 F12 ,改名. 多数人改项目名 ...

  8. Others-Goldengate 数据同步

    GoldenGate 是一家创建于1995年的美国公司,开发总部设在旧金山,在北美,欧洲和亚洲(包括新加坡.印度.澳大利亚)设有支持中心. 公司名称 GoldenGate 总部地点 旧金山 成立时间 ...

  9. caffe openpose/Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields配置（转）

    Realtime Multi-Person 2D Pose Estimation using Part Affinity Fields 是CVPR2017的一篇论文,作者称是世界上第一个基于深度学习的 ...

  10. Struts和Hibernate使用总结

    1   struts.xml重定向时报错    action cannot be found in the namespace/     http://blog.csdn.net/greetturin ...