<!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. lua工具库penlight--08额外的库（一）

    额外的库 在这一节中的库不再被认为是Penlight的核心部分,但在需要时,仍提供专门的功能. 简单的输入的模式 Lua 的字符串模式匹配是非常强大,通常您将不需要传统的正则表达式库.即便如此,有时  ...

  2. sama5d3 环境检测　gpio--yk测试

    说明: gpio的MAP关系 yk0--pioA7  yk1--pioA5   yk2--pioA9   yk3--pioA3   yk4--pioA1  yk5--pioA8    (端子从左--& ...

  3. STM32CubeMX使用方法及功能介绍

    推荐 分享一个朋友的人工智能教程,零基础!通俗易懂!希望你也加入到人工智能的队伍中来! http://www.captainbed.net/strongerhuang Ⅰ.写在前面 学习本文之前可以查 ...

  4. select 5种子句介绍

    一.Where 条件查询 ①where expression 用法:expression为真,则该行取出 运用场合 各种条件查询场合,如按学号查学生,按价格查商品,按发布时间查新闻等 ②select ...

  5. LRU算法 - LRU Cache

    这个是比较经典的LRU(Least recently used,最近最少使用)算法,算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“如果数据最近被访问过,那么将来被访问的几率也更高”. 一般应 ...

  6. 005杰信-factory删除数据

    factory表的删除分为两种:单行删除,以及批量删除. 过程:在jFactoryCreate.jsp页面上两个按钮,单行删除以及批量删除.

  7. OGNL（Object-Graph Navigation Language），可以方便地操作对象属性的开源表达式语言，使页面更简洁；

    OGNL(Object-Graph Navigation Language),可以方便地操作对象属性的开源表达式语言,使页面更简洁: 支持运算符(如+-*/),比普通的标志具有更高的自由度和更强的功能 ...

  8. JAVA基础之訪问控制权限(封装)

    包:库单元 1.当编写一个Java源码文件时.此文件通常被称为编译单元(有时也被称为转译单元). 2.每一个编译单元都必须有一个后缀名.java,而在编译单元内则能够有一个public类,该类名称必须 ...

  9. ES 中的 POST 和 PUT 的区别

    0.什么是Restful架构 比较难说清楚,这部分大雾状态,引ruanyf 理解RESTful架构 的几句总结吧: Fielding将他对互联网软件的架构原则,定名为REST,即Representat ...

  10. phalcon下拉列表

    <?php echo Phalcon\Tag::selectStatic("gender", array(0 => "Male", 1 => ...