<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script>

            window.onload=function(){

                setInterval("rollImg()",2000);

            }

            var imgarr=["https://www.w3school.com.cn/i/eg_tulip.jpg",

			"https://www.w3school.com.cn/i/eg_chinarose.jpg",

		        "https://www.runoob.com/images/pulpit.jpg"]

            var i = 1;

            function rollImg(){

                i++;

                if(i == 4){

                    i = 1;

                }

                var img_id = document.getElementById("img_id");

                img_id.src= imgarr[i-1];

            }

        </script>

    </head>

    <body>

        <center>

            <div style="width: 1200px; height: 800px; border: 5px solid purple; overflow: hidden;">

                <img src="https://www.w3school.com.cn/i/eg_tulip.jpg" id="img_id"/>

            </div>

        </center>

    </body>

</html>

　这是简单的原生js图片轮播，复制代码保存为网页即可看到效果。如有错误和不足之处，欢迎指正　

js 图片轮播简单版的更多相关文章

  1. js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...

  2. JS图片轮播[左右轮播

    直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. js 图片轮播（一）

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

  4. js 图片轮播代码编辑

    图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...

  5. Js 图片轮播渐隐效果

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 非常简洁的js图片轮播

    <div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...

  7. js图片轮播图

    /*焦点图*/        var Box='.carousel';//盒子        var Menu=$(Box+' .l_cursor li');//圆点菜单        var Con ...

  8. 最简单的JS图片轮播

    var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...

  9. angular js 图片轮播

    搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...

随机推荐

  1. Java多态实现的机制

    Java提供了编译时多态和运行时多态两种多态机制.前者是通过方法重载实现的,后者是通过方法的覆盖实现的. 在方法覆盖中,子类可以覆盖父类的方法,因此同类的方法会在父类与子类中有着不同的表现形式. 在J ...

  2. 适合MCU用的C语言快速互转HEX（16进制）和原始字符串/数组方法

    缘由 这个起因是昨晚群里有人在讨论怎么把字符串转成HEX方法最佳,讨论到最后变成哪种方法效率最优了.毕竟这代码是要在MCU上面跑的,要同时考虑到时间和空间的最优解. 当然讨论的是有结果的,具体实现的方 ...

  3. 【原创】（五）Linux进程调度-CFS调度器

    背景 Read the fucking source code! --By 鲁迅 A picture is worth a thousand words. --By 高尔基 说明: Kernel版本: ...

  4. LeetCode专题——详解搜索算法中的搜索策略和剪枝

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第20篇文章,今天讨论的是数字组合问题. 描述 给定一个int类型的候选集,和一个int类型的target,要求返 ...

  5. 使用VS2017进行Python代码的编写并打印出九九乘法表

    我们来盘一盘怎么使用VS2017进行python代码的编写并打印出九九乘法表. 使用Visual Studio 2017进行Python编程不需要太复杂的工作,只需要vs2017安装好对Python的 ...

  6. Windows下EDK2环境的搭建以及经典的程序设计Print Hello World ！-----（Linux下的待后续熟练了再更新）

    很久没有更新博客了,之前的博客末尾有提到过要写有关EDK2环境搭建的博客,现在就是完成的时候了,后续博客更新会比较规律(大概每周一篇?) 本人博客仅仅发表于博客园,本人主页为         http ...

  7. Java多线程并发04——合理使用线程池

    在此之前,我们已经了解了关于线程的基本知识,今天将为各位带来,线程池这一技术.关注我的公众号「Java面典」了解更多 Java 相关知识点. 为什么使用线程池?线程池做的工作主要是控制运行的线程的数量 ...

  8. 通过极简模拟框架让你了解ASP.NET Core MVC框架的设计与实现[上篇]

    <200行代码,7个对象--让你了解ASP.NET Core框架的本质>让很多读者对ASP.NET Core管道有了真实的了解.在过去很长一段时间中,有很多人私信给我:能否按照相同的方式分 ...

  9. Natas3 Writeup（爬虫协议robots.txt）

    Natas3: 页面提示本页面什么都没有. 在源码中发现提示:无信息泄露,谷歌这次不会发现它.提到了搜索引擎,猜测爬虫协议robots.txt中存在信息泄露,访问网站爬虫协议http://natas3 ...

  10. nmap加载nse脚本在内网渗透中的使用－上

    转载自:https://mp.weixin.qq.com/s/zEgHxJEOfaiYVZYmg7NnXA? 大多数情况下,大家都认为nmap只是一个扫描工具,而不把当成是一个渗透工具.nmap集成了 ...