<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. 题解-[HNOI2001]遥控赛车比赛

    题解-[HNOI2001]遥控赛车比赛 前置知识:记忆化搜索.\(\texttt{Bfs}\). 参考资料 https://www.luogu.com.cn/blog/CYJian/solution- ...

  2. 基于 Redis 实现 CAS 操作

    基于 Redis 实现 CAS 操作 Intro 在 .NET 里并发情况下我们可以使用 Interlocked.CompareExchange 来实现 CAS (Compare And Swap) ...

  3. Cake URAL - 1755

    1755. Cake Time limit: 0.5 secondMemory limit: 64 MB Karlsson and Little Boy have found a cake in th ...

  4. 量子计算机编程(二)——QPU基础函数

    第二部分主要是QPU的基础功能,第一部分就像是我们有了哪些基本的语句,第二部分就是我们能写一些简单基础的函数,一些小模块,第三部分就是他的应用了. 先来看一下一个简单量子应用的结构: 第一步,将量子态 ...

  5. 2020ubuntu1804server编译安装redis笔记（一）及报make test错误解决办法

    redis的大名我想大家都不陌生,今天在ubuntu server上进行编译安装,虽然apt也可以安装,但作为内存数据库,redis又是c开发的,编译安装,对机器的适应和性能更好. 安装笔记如下 第1 ...

  6. 浅谈静态布局、流式布局，rem布局，弹性布局、响应式布局

    静态布局: 特点:没有兼容性问题 PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分:移动设备:另外建立移动网站,单独 ...

  7. Django的路由系统01-路由分发

    1. Including other URLconfs 原urls.py文件,多个app的路由系统写在一起,不方便管理 范例: from django.conf.urls import url fro ...

  8. Redis06——Redis到底能用在什么地方（上）

    之前我们介绍了一些列关于Redis的数据结构.持久化.过期&淘汰策略.集群化等知识点,感兴趣的小伙伴可以在文章的末尾查看往期内容.今天将为大家带来Redis的应用.由于本篇文章较长,所以将拆分 ...

  9. django中ORM中锁和事务

    一 锁 行级锁 select_for_update(nowait=False, skip_locked=False) #注意必须用在事务里面,至于如何开启事务,我们看下面的事务一节. 返回一个锁住行直 ...

  10. nlogn的最长不下降子序列【tyvj1254挑选士兵】

    var a,d:Array[-..]of longint; i,n,m,k,l:longint; function erfen(x:longint):longint; var mid,h,t:long ...