<!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. 帝国cms发布文章对哪些数据表做了操作

    帝国cms 发布一篇文章会影响哪些数据表 insert into phome_enewsfile_1(pubid,filename,filesize,adduser,path,filetime,cla ...

  2. 使用加强堆结构解决topK问题

    作者:Grey 原文地址: 使用加强堆结构解决topK问题 题目描述 LintCode 550 · Top K Frequent Words II 思路 由于要统计每个字符串的次数,以及字典序,所以, ...

  3. Java函数的学习

    函数的定义 - 定义的位置:定义在类的内部 - 组成部分: 函数修饰符 类型 函数名(形式参数){ 局部变量: 注释: 函数体: } 函数的调用 - 调用函数时使用 : `函数名():` - 函数在执 ...

  4. Ubuntu 百度飞桨和 CUDA 的安装

    Ubuntu 百度飞桨 和 CUDA 的安装 1.简介 本文主要是 Ubuntu 百度飞桨 和 CUDA 的安装 系统:Ubuntu 20.04 百度飞桨:2.2 为例 2.百度飞桨安装 访问百度飞桨 ...

  5. 3.5 常用Linux命令

    1．touch命令 touch命令用于创建空白文件或设置文件的时间,语法格式为"touch [参数] 文件名称". 2．mkdir命令 mkdir命令用于创建空白的目录,英文全称为 ...

  6. [AcWing 26] 二进制中1的个数

    点击查看代码 class Solution { public: int NumberOf1(int n) { unsigned un = n; int res = 0; while (un) { re ...

  7. [STL] stack 栈

    在出栈时需要进行两步操作,即先 top( ) 获得栈顶元素,再 pop( ) 删除栈顶元素

  8. 漫谈 HTTP 连接

    关注「开源Linux」,选择"设为星标" 回复「学习」,有我为您特别筛选的学习资料~ 本文首先会 HTTP 的特点和优缺点,然后会详细介绍 HTTP 长连接和短连接的连接管理,通过 ...

  9. JavaScript 数据结构与算法2(队列和双端队列)

    学习数据结构的 git 代码地址: https://gitee.com/zhangning187/js-data-structure-study 1.队列和双端队列 队列和栈非常类似,但是使用了与 后 ...

  10. 【总结】2022GDOI普及组试题与题解（缺两天的T4）

    标签 2022 广东省选普及组 GDOI 试题 前往Luogu下载 Luogu下载:This Day1题解 T1 邹忌讽齐王纳谏 打卡题,建议模拟 建议使用map,时间复杂度为\(O(nlogn)\) ...