<!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. javaweb reponse 写出文件

    Map map = getSearchValue(); File excelFile = orderService.getexportexcel(id,map); InputStream is = n ...

  2. XML异步请求实例

    其实还是很格式化的: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...

  3. 算法图绘制工具Graphviz

    graphviz是贝尔实验室设计的一个开源的画图工具,它的强大主要体现在“所思即所得"(WYTIWYG,what you think is what you get),这是和office的“ ...

  4. msf提权命令/meterpreter下的几个命令

    废话: 今天本来日学校内网.以为是台08.结果稀里糊涂居然日了宿舍哥们儿的PC机.按道理都该装杀毒的才对,我舍友都不装的.裸装上阵说的就是我舍友了.劝各位大佬.把杀毒装好.补丁打好. 通过这次我也学到 ...

  5. [Java] 一种好的JAVA分页实现

    喃都不说了,贴代码,意思都在代码里面了 Page.java //分页类.定义分页字段信息,供前台页面使用 package com.core.common; import java.util.List; ...

  6. Spring Boot可以离开Spring Cloud独立使用开发项目，但是Spring Cloud离不开Spring Boot，属于依赖的关系。

    Spring Boot 是 Spring 的一套快速配置脚手架,可以基于Spring Boot 快速开发单个微服务,Spring Cloud是一个基于Spring Boot实现的云应用开发工具:Spr ...

  7. JAVA会将所有的错误封装成为一个对象，其根本父类为Throwable

    JAVA会将所有的错误封装成为一个对象,其根本父类为Throwable. Throwable有两个子类:Error和Exception. 一个Error对象表示一个程序错误,指的是底层的.低级的.不可 ...

  8. 【UVa】Jump（dp）

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  9. 【BZOJ】1637: [Usaco2007 Mar]Balanced Lineup（前缀和+差分+特殊的技巧）

    http://www.lydsy.com/JudgeOnline/problem.php?id=1637 很神思想.. 前缀和应用到了极点... 我们可以发现当数量一定时,这个区间最前边的牛的前边一个 ...

  10. springcloud微服务架构搭建

    SpringCloud微服务框架搭建 一.微服务架构 1.1什么是分布式 不同模块部署在不同服务器上 作用:分布式解决网站高并发带来问题 1.2什么是集群 多台服务器部署相同应用构成一个集群 作用:通 ...