<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. Tomcat8优化--Apache JMeter测试

    一.部署测试java web项目(压力测试环境搭建) 1.mysql环境 #切换到mysql目录 cd /usr/local/mysql #查看mysql环境 rpm -qa | grep -i my ...

  2. 网络编程概念 和OSI七层结构简介

    什么是网络编程 网络通常指的是计算机中的互联网,是由多台计算机通过网线或其他媒介相互链接组成的 编写基于网络的应用程序的过程序称之为网络编程 学习网络编程就是要学习利用网络来与另一台计算机相互传输数据 ...

  3. iOS开发 - 设立UIButton的Image为Aspect Fit

    Button setImage设置的图片默认是会拉伸缩放的,如果我想要Aspect Fit的效果,要如何做呢?一开始我想到了用contentMode属性,很可惜不起作用.后来我发现button有一个i ...

  4. ARC中__bridge, __bridge__transfer, __bridge_retained 关系

    总结于 IOS Tuturial 中 ARC两章,详细在dropbox pdf 文档. Toll-Free Bridging 当你在 Objective-C 和 Core Foundation 对象之 ...

  5. 01 极简Linux操作系统发展历史

    Unix操作系统的诞生 1965 年之前的时候,电脑并不像现在一样普遍,它可不是一般人能碰的起的,除非是军事或者学院的研究机构,而且当时大型主机至多能提供30台终端(30个键盘.显示器),连接一台电脑 ...

  6. swoole websocket_server 聊天室--群聊

    centos7  php7.2 swoole4.3 nginx1.8 websocket_server 代码 <?php $server = new Swoole\WebSocket\Serve ...

  7. tkinter学习1

    GUI 用户交互界面 tkinter 介绍 tkinter是 python自带的gui库,对图像处理库tk的封装 #导入tkinter库 import tkinter #创建主窗口对象 root = ...

  8. 深入解析Underscore.js源码架构

    Underscore.js是很有名的一个工具库,我也经常用他来处理对象,数组等,本文会深入解析Underscore源码架构,跟大家一起学习下他源码的亮点,然后模仿他写一个简单的架子来加深理解.他的源码 ...

  9. Code Index: 基于Lucene.Net的代码检索工具

    目录 用途 Github地址 示例 特性 用途 维护一个拥有巨大代码量的项目, 依靠自带的代码搜索工具搜索速度缓慢, 一个快速的代码检索工具就显得极为必要, 所以自己撸了个小工具. Github地址 ...

  10. 创建Sphinx + GitHub + ReadtheDocs托管文档

    最新博客链接 "Tsanfer's Blog" 创建Sphinx + GitHub + ReadtheDocs托管文档 Readthedocs在线电子书链接