javaScript实现轮播图
一.需求分析
在首页完成对轮播图的效果实现,完成自动切换图片的功能。
二.技术分析
- 获取元素 document.getElementById(“id 名称”)
- 事件(onload)
- 定时操作： setInterval(“changeImg()”,3000);
1.setInterval定时器
三.代码实现
1.切换图片.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换图片</title>
<style>
div{
border: 1px solid white;
width:500px ;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script>
var i=1;
function changeImg(){
i++;
document.getElementById("img1").src="../../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>
<body>
<div>
<input type="button" value="下一张" onclick="changeImg()"/>
<img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
</div>
</body>
</html>
2.轮播图.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
#father{
border: 0px solid red;
width: 1300px;
height: 2170px;
margin: auto;
} </style>
<script>
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
} //书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>
<body onload="init()">
<div id="father"> <!--轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%" id="img1"/>
</div> </div>
</body>
</html>
javaScript实现轮播图的更多相关文章
- JavaScript焦点轮播图
在慕课学习了JavaScript焦点轮播图特效,在此做一个整理. 首先是html结构,我用的是本地同文件夹下的三张图片,多出来的第一张(pic3副本)和最后一张图片(pic1副本)是为了实现无缝切换效 ...
- HTML+CSS+Javascript实现轮播图效果
HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...
- 原生javascript焦点轮播图
刚刚学会,写了一个轮播图效果,不过bug蛮多,请高手指点一下,谢谢 <!DOCTYPE html> <html> <head> <meta charset=& ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- 【JavaScript】轮播图
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...
- JavaScript 自适应轮播图
代码 话不多说,先上代码,方便复制粘贴.演示 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- javascript简单轮播图
**轮播图实现原理: 通过多张图片平铺,用overflow:hidden只显示一张图片.其他的隐藏,无缝滚动用定时器改变元素的left值让图片呈现左右滚动的效果.** HTML布局和内容: 1.容器c ...
- 原生JavaScript实现轮播图
---恢复内容开始--- 实现原理 通过自定义的animate函数来改变元素的left值让图片呈现左右滚动的效果 HTML: <!DOCTYPE html> <html> &l ...
- JavaScript之轮播图
(1)html <div class="box" id="box"> <ul class="uls" id="u ...
随机推荐
- 七、python沉淀之路--集合
一. 1.字符串转集合 s = 'hello' se = set(s) print(se) {'e', 'o', 'h', 'l'} 2.列表转集合 l1 = ['hello','python','n ...
- BZOJ3141：[HNOI2013]旅行
浅谈队列:https://www.cnblogs.com/AKMer/p/10314965.html 题目传送门:https://www.lydsy.com/JudgeOnline/problem.p ...
- Jet Brains家族XX方法
声明:本文转载自 https://www.jianshu.com/p/f404994e2843 2018/11/23
- Angular5学习笔记 - 创建组件（四）
一.创建组件 ng generate component component-name #简写 ng g c component-name ng generate directive|pipe|ser ...
- hibernate中mysql数据交互中文乱码问题
来源于"http://www.cnblogs.com/jiafuwei/p/4423101.html"; 修改hibernate的配置文件hibernate.cfg.xml,在配置 ...
- Day2-Python基础2---浅copy、深copy的差别
浅copy 首先我们来看下面一段代码: 1 >>> names = ["maqing"," peilin"," xiaoming&q ...
- 线程及同步的性能 – 线程池/ ThreadPoolExecutors/ ForkJoinPool
线程池和ThreadPoolExecutors 虽然在程序中可以直接使用Thread类型来进行线程操作,但是更多的情况是使用线程池,尤其是在Java EE应用服务器中,一般会使用若干个线程池来处理来自 ...
- 第八章 Java中的并发工具类
等待多线程完成的CountDownLatch countDownLatch允许一个或多个线程等待其他线程完成操作. public class CountDownLatchTest { static C ...
- paramiko监控 windows服务器 被监控服务器只需要安装openssh服务即可基于wmic完成大部分监控
#!/usr/bin/python #-*- coding: UTF-8 -*- #++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- NSOperation/NSOperationQueue详细使用介绍
一.简介 (1)是使用GCD实现的一套Objective-C的API (2)是面向对象的线程技术 (3)提供了一些在GCD中不容易实现的特性,如:限制最大并发数量.操作之间的依赖关系 NSOp ...