<!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. Jmeter测试带加密参数的接口

    在做接口测试时,很多时候我们都会碰到带有加密参数的接口,这种接口一般来讲都会有统一的加密方法,找开发要就好,Jmeter怎么去测呢 1.整体结构如下所示: 2.操作步骤 (1)将加密方法打成jar包放 ...

  2. love2d--glsl02变量和语句

    Shader分为顶点着色器和片段着色器,GPU先处理顶点再处理片段,大概可以这么理解, 顶点着色器处理模型里的点,输出处理后的数据,这些数据经过GPU其它模块处理后传入 片段着色器,经片段着色器综合后 ...

  3. UCOS2系统内核讲述（五）_初始化TCB详情

    Ⅰ.写在前面 学习本文之前可以参看我前面的文章: UCOS2系统内核讲述(四)_创建任务 上一篇文章讲述了关于函数“OSTaskCreateExt”创建任务函数体里面重要一些的内容,本文接着上一张讲述 ...

  4. PHP——数组2（数组函数，二维数组，正则表达式）

    <body> <?php //数组函数 $arr=array(1,2,3,4,5,6); print_r($arr); echo "<br />"; ...

  5. time函数

    time函数 time #include<time.h> time_t time(time_t *t); typdef long int time_t; time() returns th ...

  6. linux系统中/etc/syslog.conf文件解读

    1: syslog.conf的介绍 对于不同类型的Unix,标准UnixLog系统的设置,实际上除了一些关键词的不同,系统的syslog.conf格式是相同的.syslog采用可配置的.统一的系统登记 ...

  7. js 拼接字符串 穿参数 带有单引号

    var html="<a href=\"#\"  onclick=Unlock(\""+flid+"\",1)>弹出& ...

  8. 更新加子查询加相同的表解决办法 mysql

    UPDATE ofuser SET auid = '0' WHERE uid in (SELECT uid FROM (select tmp.* from ofuser tmp)a WHERE aui ...

  9. Linux系统下如何查看物理内存占用率

    Linux系统下如何查看物理内存占用率 Linux下看内存和CPU使用率一般都用top命令,但是实际在用的时候,用top查看出来的内存占用率都非常高,如:Mem:   4086496k total, ...

  10. MySQL的外键约束：Cascade/Restrict/No action/SET NULL ：级联操作

    转自:http://blog.csdn.net/cnjsnt_s/article/details/5548280 具体使用时需要参考:http://blog.csdn.net/codeforme/ar ...