<!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. linux之basename

    NAME top basename, dirname - parse pathname components SYNOPSIS top #include <libgen.h> char * ...

  2. [转]C++中的三种继承public，protected，private

    链接:http://www.cnblogs.com/BeyondAnyTime/archive/2012/05/23/2514964.html

  3. hive表分区的修复

    hive从低版本升级到高版本或者做hadoop的集群数据迁移时,需要重新创建表和表分区,由于使用的是动态分区,所以需要重新刷新分区表字段,否则无法查看数据. 在hive中执行中以下命令即可自动更新元数 ...

  4. Java编译后产生class文件的命名规则

    今天刚好有同学问了下Java编译后产生的.class文件名的问题,虽然一直都在使用Java做开发,但是之前对编译后产生的.class文件名的规范也基本没做了解过,也真的是忏愧啊!今天无论如何都要总结下 ...

  5. Libgdx多线程与渲染线程

    http://www.leestorm.com/post/115.html ——————————————————————————————————————————————————————————‘ 大部 ...

  6. 核函数(kernel function)

    百度百科的解释: 常用核函数: 1.线性核(Linear Kernel): 2.多项式核(Polynomial Kernel): 3.径向基核函数(Radial Basis Function),也叫高 ...

  7. 条件随机场（Conditional random field,CRF）

  8. 梯度下降算法到logistic回归

    http://sbp810050504.blog.51cto.com/2799422/1608064/ http://blog.csdn.net/dongtingzhizi/article/detai ...

  9. 多媒体开发之rtp 打包发流--- 从h264中获取分辨率

    http://blog.csdn.net/DiegoTJ/article/details/5541877 http://www.cnblogs.com/lidabo/p/4482684.html 分辨 ...

  10. (转)FS_S5PC100平台上Linux Camera驱动开发详解（一） .

     平台linuxstructlinux内核videocam 说明:        理解摄像头驱动需要四个前提:        1)摄像头基本的工作原理和S5PC100集成的Camera控制器的工作原理 ...