<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        #box{

            width:590px;

            height: 470px;

            position: relative;

            border: 1px solid;

            margin: 100px auto;

        }

        #imgList{

            width: 590px;

            height: 470px;

            position: relative;

            list-style: none;

        }

        #imgList li{

            width: 590px;

            height: 470px;

            position: absolute;

            top: 0;

            left: 0;

            display: none;

        }

        #num{

            width: 590px;

            height: 50px;

            position: absolute;

            bottom: 0;

            left: 0;

            background-color: #fdd;

            line-height: 50px;

        }

        #num i{

            display: inline-block;

            width: 20px;

            height: 20px;

            margin: 0 10px;

            background-color: #fff;

            border-radius: 50%;

            cursor: pointer;

        }

        #prve,#next{

            width: 45px;

            height: 100px;

            background: pink;

            position: absolute;

            top: 0;

            bottom: 0;

            margin: auto;

            color: #fff;

            text-align: center;

            line-height: 100px;

            font-size: 30px;

            cursor: pointer;

        }

        #next{

            right: 0;

        }

        #box .on{

            background-color:aquamarine;

        }

    </style>

</head>

<body>

    <div id="box">

        <ul id="imgList">

            <li style="display: block;"><a href="#"><img src="img/1.jpg"></a></li>

            <li><a href="#"><img src="img/2.jpg"></a></li>

            <li><a href="#"><img src="img/3.jpg"></a></li>

            <li><a href="#"><img src="img/4.jpg"></a></li>

        </ul>

        <div id="num">

            <i class="on"></i>

            <i></i>

            <i></i>

            <i></i>

        </div>

        <div id="prve"><</div>

        <div id="next">></div>

    </div>

    <script src="js/tools.js"></script>

    <script>

        var imgs = $("li"),//所有的照片

            len = imgs.length,//照片的数量

            currentIndex = 0,//默认显示第一张

            nextIndex = 1,//下一张显示的照片

            nums = $("i");//所有的小圆点

        // 自动轮播

        var timer = setInterval(move,2000);

        // 鼠标移入自动轮播暂停

        $("#box").onmouseenter = function(){

            clearInterval(timer);

        }

        // 鼠标移出启动计时器进行自动轮播

        $("#box").onmouseleave = function(){

            timer = setInterval(move,2000);

        }

        // 定义图片运动的函数

        function move(){

            fadeOut(imgs[currentIndex],1000);

            fadeIn(imgs[nextIndex],1000);

            nums[currentIndex].className = "";

            nums[nextIndex].className = "on";

            currentIndex = nextIndex;

            nextIndex++;

            if(nextIndex === len)

                nextIndex = 0;

        }

        // 单击上一个和下一个的事件

        $("#prve").onclick = function(){

            nextIndex = currentIndex-1;

            if(nextIndex<0)

                nextIndex = len-1;

            move();

更多内容请见原文，文章转载自：https://blog.csdn.net/weixin_44519496/article/details/118599165

javascript写淡入淡出效果的轮播图的更多相关文章

  1. 用原生的javascript 实现一个无限滚动的轮播图

    说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点 相同点: 首先页面布局是一样的 同样是改变.inner盒子的位置去显示不同的图片 不同点: 为了实现无限滚动需要多添加两张重复的图片 左 ...

  2. web常见效果之轮播图

    轮播图的展示效果是显而易见: HTML代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  3. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  4. 首页大屏广告效果 jquery轮播图淡入淡出

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  6. vue 写一个炫酷的轮播图

    效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-cer ...

  7. javascript编写的一个完整全方位轮播图效果

    1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  8. Jquery基础（动画效果的轮播图特效）

    jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...

  9. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

随机推荐

  1. springboot中bean的重定义

    需求描述: 项目中应用其他项目的jar包,然后有些controller中的方法有缺陷需要修改. 1.配置添加 spring.main.allow-bean-definition-overriding= ...

  2. python基础练习题（题目 学习使用auto定义变量的用法）

    day28 --------------------------------------------------------------- 实例042:变量作用域 题目 学习使用auto定义变量的用法 ...

  3. 【SpringBoot实战】视图技术-Thymeleaf

    前言 在一个Web应用中,通常会采用MVC设计模式实现对应的模型.视图和控制器,其中,视图是用户看到并与之交互的界面.对最初的Web应用来说,视图是由HTML元素组成的静态界面:而后期的Web应用更倾 ...

  4. 【SpringBoot实战】实现WEB的常用功能

    前言 通常在 Web 开发中,会涉及静态资源的访问支持.视图解析器的配置.转换器和格式化器的定制.文件上传下载等功能,甚至还需要考虑到与Web服务器关联的 Servlet相关组件的定制.Spring ...

  5. XCTF练习题---MISC---easycap

    XCTF练习题---MISC---easycap flag:FLAG:385b87afc8671dee07550290d16a8071 解题步骤: 1.观察题目,下载附件 2.拿到手以后发现是一个流量 ...

  6. 设置 Visual Studio 总是以管理员身份运行

    话不多说直接上干货 第一步: 打开 Visual Studio 的安装目录,找到 devenv.exe,然后右键快捷菜单选择"兼容性疑难解答". 第二步: 选择故障排查选项 疑难解 ...

  7. FreeRTOS --（8）任务管理之创建任务

    转载自https://blog.csdn.net/zhoutaopower/article/details/107034995 在<FreeRTOS --(7)任务管理之入门篇>文章基本分 ...

  8. HCNP Routing&Switching之Super VLAN

    前文我们了解了VLAN隔离技术MUX VLAN相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16196936.html:今天我们来聊一聊VLAN优化S ...

  9. 2003031121-浦娟-python数据分析五一假期作业

    项目 内容 课程班级博客链接 20级数据班(本) 这个作业要求链接 Python作业 博客名称 2003031121-浦娟-python数据分析五一假期作业 要求 每道题要有题目,代码(使用插入代码, ...

  10. C++实例2--职工管理系统

    职工管理系统 1.  头文件 1.1 workerManager.h 系统类 1 #pragma once // 防止头文件重复包含 2 #include<iostream> // 包含输 ...