<!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. node服务器搭建流程

    1,创建一个空文件夹,用来存放项目. 2,在空文件夹中,在cmd命令提示符中输入npm init  初始化一个服务器项目. 设置的属性信息:    name : 项目名称(小括号中是默认的,文件夹名相 ...

  2. uniapp-h5之canvans上文本的展示

    ctx.font = 'bold 14px arial';ctx.fillStyle = '#e9e6e6';ctx.fillText('长按图片保存到相册', (this.pwidth -250/e ...

  3. 快速排序算法 - go实现

    在分析redis集群中大Key的时候,通常都采用分析rdb文件的方式:但是这种方式需要在每一台redis服务器上部署分析程序及分析脚本,而像salt之类的工具运维没有开放给我们使用,一台一台部署不好管 ...

  4. Net程序崩溃了怎么去查找定位问题

    工具 这里用到两个工具分别为Procdump+Windbg Procdump:ProcDump是一个命令行实用工具,主要目的是监视应用程序,以便在管理员或开发人员可用于确定峰值的原因期间监视 CPU ...

  5. Dockerfile 命令详解及最佳实践

    Dockerfile 命令详解 FROM 指定基础镜像(必选) 所谓定制镜像,那一定是以一个镜像为基础,在其上进行定制.就像我们之前运行了一个 nginx 镜像的容器,再进行修改一样,基础镜像是必须指 ...

  6. python 本地配置文件库 Dynaconf 简介

    [前言] 在项目中经常会遇到以下几种需要用到配置文件的场景: 相同的配置参数用在不同的代码中,如果需要调整,则需要手动将各个使用到的地方都相应调整. 密码等信息不想硬编码在项目文件中. 配置文件的格式 ...

  7. springboot简单发送邮件介绍

    1.新建一个springboot项目 2.所需要的的jar包: <dependency> <groupId>org.springframework.boot</group ...

  8. 实战｜Hadoop大数据集群搭建

    一个执着于技术的公众号 前言 今天来为粉丝圆梦啦 话不多说,咱直接进入实战环节 实验环境: 主机名        IP地址                 角色 qll251       192.16 ...

  9. selenium模块使用详解、打码平台使用、xpath使用、使用selenium爬取京东商品信息、scrapy框架介绍与安装

    今日内容概要 selenium的使用 打码平台使用 xpath使用 爬取京东商品信息 scrapy 介绍和安装 内容详细 1.selenium模块的使用 # 之前咱们学requests,可以发送htt ...

  10. Centos 7以上安装Docker （亲测有效）

    一.安装前的准备 我的环境是VMware15虚拟机安装的Centos7,Linux内核是3.10.0-1062.4.1.e17.x86_64 1. 用root账户登录查看操作系统内核版本及相关信息 [ ...