js 图片轮播简单版
<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 图片轮播简单版的更多相关文章
- js图片轮播效果实现代码
首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟i ...
- JS图片轮播[左右轮播
直接可以用,网上摘下来的! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- js 图片轮播(一)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- js 图片轮播代码编辑
图片轮播,将几张图片统一放在展示平台 banner上,通过banner移动将图片轮流播放. <script>// 取对象 var btn_l = document.getElementsB ...
- Js 图片轮播渐隐效果
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 非常简洁的js图片轮播
<div id="tupian"></div><script>var jpg =new Array();jpg[0]="url(c.j ...
- js图片轮播图
/*焦点图*/ var Box='.carousel';//盒子 var Menu=$(Box+' .l_cursor li');//圆点菜单 var Con ...
- 最简单的JS图片轮播
var arr=new Array(); arr[1]="";//放图片地址 arr[2]=""; arr[3]=""; var no=0; ...
- angular js 图片轮播
搬运工: eg1: Build a Sweet AngularJS Photo Slider Pt 2 with ngTouch DEMO:http://paul-xiao.github.io/ang ...
随机推荐
- 使用R进行空间自相关检验
「全局溢出」当一个区域的特征变化影响到所有区域的结果时,就会产生全局溢出效应.这甚至适用于区域本身,因为影响可以传递到邻居并返回到自己的区域(反馈).具体来说,全球溢出效应影响到邻居.邻居到邻居.邻居 ...
- 使用python3编写程序,生成10个随机数,每个元素的值介于1到100之间,并计算所有元素的和、平均值。
代码如下: import random n = 0 sum = 0 while n < 10: num = random.randint(1, 100) sum = sum + num n += ...
- 机器学习实用案例解析(1) 使用R语言
简介 统计学一直在研究如何从数据中得到可解释的东西,而机器学习则关注如何将数据变成一些实用的东西.对两者做出如下对比更有助于理解“机器学习”这个术语:机器学习研究的内容是教给计算机一些知识,再让计算机 ...
- Posix线程编程指南(4)
Posix线程编程指南(4) 杨沙洲 原文地址:http://www.ibm.com/developerworks/cn/linux/thread/posix_threadapi/part4/ 线程终 ...
- centOS7python版本升到3
我们使用Python源代码编译的方式安装python3. 一.安装必要工具 yum-utils ,它的功能是管理repository及扩展包的工具 (主要是针对repository) $ sudo y ...
- gulp常用的插件
参考地址: http://www.cnblogs.com/1wen/p/5421212.html https://my.oschina.net/wolfx/blog/673905 http://www ...
- pytorch里一些函数的说明记录
THLongStorage *THTensor_(newSizeOf)(THTensor *self); THLongStorage *THTensor_(newStrideOf)(THTensor ...
- 最全ElasticSearch6.5白金版本从构建ELK、集群搭建到和Mybatis结合操作详细讲解
1.安装ElasticSearch6.5.1 解压相关的ElasticSearch6.5.1的tar包到目录下,如果我们需要使用JDBC来连接的话是需要到白金版以上的,以下为将基础版破解为白金版的方法 ...
- 3000字编程入门--附带Java学习路线及视频
Title: 编程入门 GitHub: BenCoper Reference: 尚硅谷-2019 Study: 文字版+视频+实战(第一个自学的网站) Explain: 文末附带Java学习视频以及项 ...
- 学习scrapy爬虫框架的一些经验和教训
首先python的scrapy框架很好,功能强大,使用起来也很方便,省去了很多造轮子的时间.在学习的过程中也碰到了一些问题,在这里希望能分享与大家分享,做一个参考 1.安装(pip延时响应问题) sc ...