<!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. 函数图 https://www.processon.com/mindmap/5b5077fae4b040415ae39c64

    ---恢复内容结束---

  2. PS前端

    学习使用Photoshop的基本使用,以及Photoshop中关于切图这一块的知识,目的是能熟练使用Photoshop查看UI设计师的设计效果图,同时利用Photoshop切图来制作专业html页面. ...

  3. python进度条

    #!/usr/bin/env python# -*- coding:utf-8 -*- import urllib url = "http://www.163.com/" #htm ...

  4. centos7.3给squid搭建代理服务器添加认证apache

    证使用浏览器打开 然后输入用户名和密码的方式 所以使用基于web服务的apache的 htpasswd 1 创建用户 设置密码 htpasswd -cd /etc/squid/passwords te ...

  5. hbase 简介

    hbase是hadoop的数据库,能够对大数据提供随机实时的读写访问功能,具有开源,分布式,可扩展行,面向列存储的特点.hbase的目标是存储并处理大量的数据. 它可以直接使用本地文件系统,也可以使用 ...

  6. leetcode950

    from queue import Queue class Solution: def deckRevealedIncreasing(self, deck): n = len(deck) que = ...

  7. as3 TweenMax TweenLite方法

    as3 TweenMax TweenLite方法补充(暂停.重新播放.倒序播放).现在来好好的学习一下:   TweenLite.to(mc, 1.5, {x:100}); 里面的mc指所作用的对象, ...

  8. ABAP-ALV详解

    OO ALV: https://www.cnblogs.com/jiangzhengjun/p/4291373.html https://www.cnblogs.com/jiangzhengjun/p ...

  9. vue深入了解组件——组件注册

    一.组件名 在注册一个组件的时候,我们始终需要给它一个名字.比如在全局注册的时候我们已经看到了: Vue.component('my-component-name', { /* ... */ }) J ...

  10. win32允许前置窗口

    win32允许前置窗口函数 AllowSetForegroundWindow(HWND hWnd) 该函数允许其他窗口调用SetForegroundWindow()(将窗口设为前置窗口),前提是调用A ...