<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. 使用R进行空间自相关检验

    「全局溢出」当一个区域的特征变化影响到所有区域的结果时,就会产生全局溢出效应.这甚至适用于区域本身,因为影响可以传递到邻居并返回到自己的区域(反馈).具体来说,全球溢出效应影响到邻居.邻居到邻居.邻居 ...

  2. 使用python3编写程序，生成10个随机数，每个元素的值介于1到100之间，并计算所有元素的和、平均值。

    代码如下: import random n = 0 sum = 0 while n < 10: num = random.randint(1, 100) sum = sum + num n += ...

  3. 机器学习实用案例解析（1） 使用R语言

    简介 统计学一直在研究如何从数据中得到可解释的东西,而机器学习则关注如何将数据变成一些实用的东西.对两者做出如下对比更有助于理解“机器学习”这个术语:机器学习研究的内容是教给计算机一些知识,再让计算机 ...

  4. Posix线程编程指南(4)

    Posix线程编程指南(4) 杨沙洲 原文地址:http://www.ibm.com/developerworks/cn/linux/thread/posix_threadapi/part4/ 线程终 ...

  5. centOS7python版本升到3

    我们使用Python源代码编译的方式安装python3. 一.安装必要工具 yum-utils ,它的功能是管理repository及扩展包的工具 (主要是针对repository) $ sudo y ...

  6. gulp常用的插件

    参考地址: http://www.cnblogs.com/1wen/p/5421212.html https://my.oschina.net/wolfx/blog/673905 http://www ...

  7. pytorch里一些函数的说明记录

    THLongStorage *THTensor_(newSizeOf)(THTensor *self); THLongStorage *THTensor_(newStrideOf)(THTensor ...

  8. 最全ElasticSearch6.5白金版本从构建ELK、集群搭建到和Mybatis结合操作详细讲解

    1.安装ElasticSearch6.5.1 解压相关的ElasticSearch6.5.1的tar包到目录下,如果我们需要使用JDBC来连接的话是需要到白金版以上的,以下为将基础版破解为白金版的方法 ...

  9. 3000字编程入门--附带Java学习路线及视频

    Title: 编程入门 GitHub: BenCoper Reference: 尚硅谷-2019 Study: 文字版+视频+实战(第一个自学的网站) Explain: 文末附带Java学习视频以及项 ...

  10. 学习scrapy爬虫框架的一些经验和教训

    首先python的scrapy框架很好,功能强大,使用起来也很方便,省去了很多造轮子的时间.在学习的过程中也碰到了一些问题,在这里希望能分享与大家分享,做一个参考 1.安装(pip延时响应问题) sc ...