<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index1</title>

    <style>

        *{margin: 0;

            padding: 0;

        }

        ul{

            list-style:none;

        }

        .outer{

            margin: 50px auto;

            height: 340px;

            width: 790px;

            position: relative;

        }

        .img li{

            position:absolute;

            top: 0;

            left:0;

        }

        .num {

            position: absolute;

            bottom: 20px;

            text-align: center;

            width: 100%;

        }

        .num li{

            display: inline-block;

            height: 20px;

            width: 20px;

            background-color: gray;

            color: #ffffff;

            text-align:center;

            line-height:20px;

            border-radius:50%;

            margin: 0 10px;

        }

        .btn{

            position: absolute;

            height: 60px;

            width: 30px;

            background-color: darkgray;

            color: #ffffff;

            text-align: center;

            line-height: 60px;

            top:50%;

            margin-top: -30px;

            display: none;

        }

        .left_btn{

            left: 0;

        }

        .right_btn{

            right: 0;

        }

        .outer:hover .btn{

            display:block;

        }

        .current{

            background-color:red!important;

        }

    </style>

</head>

<body>

    <div class="outer">

        <ul class="img">

            <li><a><img src="image/1.jpeg"/></a></li>

            <li><a><img src="image/2.jpeg"/></a></li>

            <li><a><img src="image/3.jpeg"/></a></li>

            <li><a><img src="image/4.jpeg"/></a></li>

        </ul>

        <ul class="num">

            <li class="current">1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

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

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

    </div>

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

    <script>

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

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

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

            i = index;

            $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);

        })

        var time = setInterval(move, 1500);

        var i = 0;

        function move(){

            if(i==3){

                i=-1;

            }

            i++;

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

            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

        }

        function moveL(){

            if(i==0){

                i=4;

            }

            i--;

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

            $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

        }

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

            clearInterval(time);

        },function(){

           time=setInterval(move,1500);

        })

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

            move();

        })

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

            moveL();

        })

    </script>

</body>

</html>

参考资料

HTML 之轮播图的更多相关文章

  1. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  3. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  4. CSS-用伪类制作小箭头（轮播图的左右切换btn）

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  6. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  7. Jquery 轮播图简易框架

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

  8. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  9. superSlider实现美女轮播图

    superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...

  10. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

随机推荐

  1. ms17010漏洞复现-2003

    先使用Smbtouch模块检测一下是否有漏洞. 然后使用Doublepulsar写一个shellcode到本地. 生成成功后的截图: 再使用EternalRomance植入Doublepulsar后门 ...

  2. C语言 · 数的读法

    基础练习 数的读法   时间限制:1.0s   内存限制:512.0MB    问题描述 Tom教授正在给研究生讲授一门关于基因的课程,有一件事情让他颇为头疼:一条染色体上有成千上万个碱基对,它们从0 ...

  3. 十大Intellij IDEA快捷键<转>

    Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一些有趣的讨论.每个人都有自己的最爱,想排出个理想的榜单还真是困难.以前也整理过Intellij的快捷键,这次就按 ...

  4. java---sychronized的深入理解

    synchronized 关键字,代表这个方法加锁,相当于不管哪一个线程A每次运行到这个方法时,都要检查有没有其它正在用这个方法的线程B(或者C D等),有的话要等正在使用这个方法的线程B(或者C D ...

  5. linux -- Ubuntu14.04及之后版本重启网卡不生效

    Ubuntu14.04修改配置,重启网卡没有生效,出现如下问题: service networking restart //重启网络服务 stop: Job failed while stopping ...

  6. 蓝桥杯 历届试题 剪格子（dfs搜索）

    历届试题 剪格子 时间限制:1.0s   内存限制:256.0MB 问题描述 如下图所示,3 x 3 的格子中填写了一些整数. +--*--+--+ |* || +--****--+ ||* | ** ...

  7. 常用的jQuery前端技巧收集

    调试时巧用console.log(),这比用alert()方便多了. jquery易错点:元素拼接的时候,元素还未添加到DOM,就用该预添加元素操作. ajax动态获取的数据,还没有装载html元素, ...

  8. 码农深耕 - 说说IDisposable

    概要 C#提供了方便的垃圾回收机制,使我们几乎不再需要为资源管理费心.可事实上,能被垃圾回收释放掉的只是托管资源,非托管资源还是需要我们手动释放.而为了实现这一目的,C#提供了 IDisposable ...

  9. 本地存储数据库indexedDB实现离线预览的功能

    今天在学习<高级JS编程>,看到离线存储,cookie和session都十分的熟悉,但是书中还提到了indexedDB和webSQL(已废弃),indexedDB可以像mysql一样建表, ...

  10. win7下maven的安装

    1.在安装maven之前,先确保已经安装JDK1.6及以上版本,并且配置好环境变量.2.上Maven官网(https://maven.apache.org/download.cgi)下载Maven的压 ...