<!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. 论文翻译：2021_Performance optimizations on deep noise suppression models

    论文地址:深度噪声抑制模型的性能优化 引用格式:Chee J, Braun S, Gopal V, et al. Performance optimizations on deep noise sup ...

  2. 新手小白入门C语言第五章：C存储类

    一 .存储类 在理解C的存储类之前,首先要搞懂的概念有:作用域.生存周期.连接属性 C中的存储类说明符实际上是上述属性的不同组合 作用域:一个C变量的作用域可以是 代码块作用域(在函数内部代码块中定义 ...

  3. JAVA语言学习day16--7月22日

    ###15用户选择功能 * A: 用户选择功能 * a: 案例代码 import java.util.ArrayList; import java.util.Scanner; /* * 超市管理系统主 ...

  4. 2021.08.05 P1340 兽径管理（最小生成树）

    2021.08.05 P1340 兽径管理(最小生成树) P1340 兽径管理 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 重点: 1.离线化. 题意: 有n个点,m条边,每次加 ...

  5. 【Java分享客栈】从线上环境摘取了四个代码优化记录分享给大家

    前言 因为前段时间新项目已经完成目前趋于稳定,所以最近我被分配到了公司的运维组,负责维护另外一个项目,包含处理客户反馈的日常问题,以及对系统缺陷进行优化. 经过了接近两周的维护,除了日常问题以外,代码 ...

  6. selenium模块获得js动态数据-17track为例

    通过selenium模块驱动Chrome浏览器,获得js动态数据,以17track为例:通过运单号查询最新的物流信息 1 import re 2 from time import sleep 3 fr ...

  7. 在 ESXi 主机上关闭无响应的虚拟机电源

    使用 ESXi 命令行 使用 SSH 以 root 身份登录到 ESXi. 通过运行以下命令获取所有已注册虚拟机的列表,由其 VMID 和显示名称标识:       vim-cmd vmsvc/get ...

  8. ServletContext类 (共享数据+获取初始化的参数+请求转发+读取资源文件)

    ServletContext对象 web容器在启动的时候,它会为每个web程序都创建一个对应的ServletContext对象,它代表了当前的 web应用: 作用 1.共享数据  (一般用sessio ...

  9. ReadWriteLock 接口详解

    ReadWriteLock 接口详解 这是本人阅读ReadWriteLock接口源码的注释后,写出的一篇知识分享博客 读写锁的成分是什么? 读锁 Lock readLock(); 只要没有写锁,读锁可 ...

  10. java基础4.20

    1.是否可以从一个static方法内部发出对非static方法的调用? 不可以.因为非static方法是要与对象关联在一起的,必须创建一个对象后,才可以在该对象上进行方法调用,而static方法调用时 ...