js实现简单的图片轮播

时间：2020-12-27 22:58:34

js代码如下

 <script type="text/javascript">

 var n=1;

 var map=new Array();

 map[0]=new Image();

 map[1]=new Image();

 map[2]=new Image();

 map[3]=new Image();

 map[4]=new Image();

 map[5]=new Image();

 map[0].src="data:images/0.jpg";

 map[1].src="data:images/1.jpg";

 map[2].src="data:images/2.jpg";

 map[3].src="data:images/3.jpg";

 map[4].src="data:images/4.jpg";

 map[5].src="data:images/5.jpg";

 function disp()

 {

 document.getElementById("img1").src=map[n].src;

 n=n+1;

 if (n>5)

 n=0;

 window.setTimeout("disp();",2000);

 }

 window.setTimeout("disp();",2000);

 </script>

自己替换掉图片地址和名称，以及切换时间。2000表示2秒 。

然后在<body>和</body>中间加上下面一段代码。

 <div id="content1">

 <img id="img1" src="data:images/0.jpg" width="100%" height="300px">

 </div>

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

  1. js最简单焦点图片轮播代码

    将下面代码保存为banner.js,在需要显示焦点图的地方调用该js即可. <script type="text/javascript" src="banner.j ...

  2. 使用jQuery做简单的图片轮播效果

      一.本特效主要用到的前端知识点 CSS中绝对定位(absolute)CSS实现垂直居中jQuery中简单的淡入淡出动画效果(fadeIn,fadeOut)定时器(setInterval,clear ...

  3. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  4. js&sol;jquery中实现图片轮播

    一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  5. 原生js和jquery实现图片轮播特效&lpar;转&rpar;

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  6. html&plus;jq实现简单的图片轮播

    今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈: <body style="text-align: center;&quo ...

  7. 纯JS写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display&quot ...

  8. 【原生JS】写最简单的图片轮播

    非常简单的一个大图轮播,通过将控制显示位置来进行轮播效果,写来给正在学习的新手朋友们参考交流. 先看效果:(实际效果没有这么快) 先看布局: <div id="display&quot ...

  9. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

随机推荐

  1. cocos2dx 3&period;x&lpar;让精灵随着重力感应的方向移动而移动&rpar;

    // // GameScene.hpp // HelloWord // // Created by apple on 2017/1/7. // // #ifndef GameScene_hpp #de ...

  2. 使用ThreadSanitizer线程检查工具

    ThreadSanitizer又叫TSan,是一个检查线程Data Race的C/C++工具.它集成在新版的gcc和clang中,通过编译时加-fsanitize=thread,可以在运行时检测出Da ...

  3. DEDE仿站经常用到的基本标签和变量

    一.针对于DEDE后台基本设置里面的使用到的数据标签. 主标题:{dede:global.cfg_webname/}  主要用于<title></title>里面 网 站描述: ...

  4. Swift中的便利构造器和构造器链

    import UIKit // 1.一个类中至少有一个指定构造器, 其必须负责初始化类中所有的实例存储属性 // 2.便利构造器属于次要的, 辅助性的构造器 // 3.类中可以不定义便利构造器, 便利 ...

  5. JVM学习之JVM1&period;6 GC详解

    转自:http://www.cnblogs.com/ggjucheng/p/3977384.html,多谢分享 前言  JVM GC是JVM的内存回收算法,调整JVM GC(Garbage Colle ...

  6. Golang 网络爬虫框架gocolly&sol;colly 一

    Golang 网络爬虫框架gocolly/colly 一 gocolly是用go实现的网络爬虫框架,目前在github上具有3400+星,名列go版爬虫程序榜首.gocolly快速优雅,在单核上每秒可 ...

  7. ntoskrnl符号在IDA中查看的问题

    最近发现x64的ntoskrnl.exe,如果直接在IDA中查看,会有一些函数IDA没有识别出来,比如

  8. 30分钟了解Springboot整合Shiro

    项目结构截图: 项目在结构上没有任何特殊之处,基本就是MVC的传统结构重点需要关注的是3个Entity类.2个Controller类和1个Config类. 首先,提供pom的完整文档结构: <p ...

  9. pytorch visdom可视化工具学习—1—详细使用-1—基本使用函数

    使用教程,参考: https://github.com/facebookresearch/visdom https://www.pytorchtutorial.com/using-visdom-for ...

  10. PyTorch 使用心得

    PyTorch 使用心得 模板 import torch.nn as nn import torch.optim as optim class Model(nn.Module): def __init ...

相关文章