<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. Vue进阶课堂之《从HTML到Pug》

    是啥 Pug听起来或许比较陌生,但是如果说起她的前生,相信各位多少会有耳闻:Jade.每当你不停的敲打<><><><></></> ...

  2. Codeforces Round #295 (Div. 2) B. Two Buttons 520B

    B. Two Buttons time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  3. 阿里云上docker部署nginx实现反向代理

    简介   需要从镜像仓库找到所需要的nginx版本pull下来.(地址:https://hub.docker.com/) 1.docker pull nginx 1.挂载目录 1.1 获取nginx. ...

  4. 第八章、小节二vuex

    a.用vuex首先先安装vuex npm install vuex --save b.在src目录下创建store文件夹,在store中创建index.js存放各个状态 c.在一个模块化的打包系统中, ...

  5. Flutter环境搭建以及快捷命令

    Flutter环境搭建 配置环境变量 用户变量 FLUTTER_STORAGE_BASE_URL : https://storage.flutter-io.cn PUB_HOSTED_URL : ht ...

  6. JS反爬绕过思路之--谷歌学术镜像网链接抓取

    首先,从问题出发: http://ac.scmor.com/ 在谷歌学术镜像网收集着多个谷歌镜像的链接.我们目标就是要把这些链接拿到手. F12查看源码可以发现,对应的a标签并不是我们想要的链接,而是 ...

  7. bug的前世今生

    项目上发现的产品bug,若本地有问题,那就是漏测 1.提到产品bug系统 2.需要追踪,要么是漏测,要么是改出来的问题,漏测的需要补充到测试点里 项目上发现的产品bug,若本地没问题,那就是项目上的产 ...

  8. Java实现GBK转码到UTF-8(文件)

    所以,虚无的悲叹,寻根问底仍是由于肉身的圈定.肉身蒙蔽了灵魂的眼睛,单是看见要回那无中去,却忘了你原是从那无中来.                                            ...

  9. 提示消息无缝向上滚动（vue）

    <div class="order-tips__message-item" :class="getClass(index)" v-for="(o ...

  10. 分布式框架Celery（转）

    一.简介 Celery是一个异步任务的调度工具. Celery 是 Distributed Task Queue,分布式任务队列,分布式决定了可以有多个 worker 的存在,队列表示其是异步操作,即 ...