<!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. CentOS7.x 离线安装和开机启动 supervisor 4.2.4

    CentOS7.x 服务器 离线安装 开机启动 supervisor 4.2.4

  2. 原生微信小程序里类似于计算属性写法

    可直接在wxml文件里直接写入直接调用.变量只支持var命名,不支持let const     </view>     <view class="wx_bgc"  ...

  3. Java语言学习day30--8月5日

    ###10String类的其他方法 * A:String类的其他方法 * a: 方法介绍 * int length(): 返回字符串的长度 * String substring(int beginIn ...

  4. 前端架构三大巨头之一Angular | 深度讲解

    云智慧集团成立于2009年,是全栈智能业务运维解决方案服务商.经过多年自主研发,公司形成了从IT运维.电力运维到IoT运维的产业布局,覆盖ITOM.ITOA.ITSM.DevOps以及IoT几大领域, ...

  5. K-MEANS算法【聚类】

    可视化 聚类 最简单实用的聚类算法:K-MEANS算法 K值:数据分成几份 质心:簇的中心点 优化目标:K个簇的(每个簇中的每个点距离质心的距离)的和最小 ci中心点,x个别点 工作流程: 设置K值, ...

  6. Hadoop（二）Hdfs基本操作

    HDFS HDFS由大量服务器组成存储集群,将数据进行分片与副本,实现高容错. 而分片最小的单位就是块.默认块的大小是64M. HDFS Cli操作 官网https://hadoop.apache.o ...

  7. OAuth 2.1 框架

    OAuth 2.1 Draft 当前版本:v2-1-05 失效时间:2022/09/08 本文对部分原文翻译,同时加了一些笔记,以便理解. 单词 译意 identifiler 识别码 Resource ...

  8. 利用腾讯云函数部署.Net 5米游社原神每日签到功能

    自从GitHub批量禁止滥用Action功能后,项目不得不考虑另外方案执行应用.其中腾讯云函数被大家作为不错的选择(虽然马上也要收费了). 但对于.Net的部署目前资源很少,而且我也没学过bash.在 ...

  9. apparmor 源码分析

    这里不对apparmor做介绍,记录一下源码分析过程. 初始化 static int __init apparmor_init(void) -> security_add_hooks(appar ...

  10. Linux系统安装Python3环境

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 本文基于如下Linux系统版本: 1.默认情况下,Lin ...