JavaScript做轮播图片（2）

有了上一篇的基础，这次只需要让一个函数隔一段时间主动去调用切换图片的函数。

用setInterval(函数，间隔时间(毫秒ms))，每隔多少毫秒，重新刷新一下页面，在刷新页面的时候调用切换图片的函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
margin: auto;
}
</style>
<script>
function init(){
window.setInterval("changeImg()",3000);
}
var i=1;
function changeImg(){
i++;
document.getElementById("pic").src="img/P"+i+".jpg";
if(i==4){
i=1;
}
}
</script>
</head>
<body οnlοad="init()">
<div id="">
<img src="img/P1.jpg" id="pic"/>
</div>
</body>
</html>

JavaScript做轮播图片（2）相关推荐

JavaScript做轮播图片（1）
首先,能决定图片出现的原因是因为指定了图片的路径,也就是<img>的src属性.因此我们要考虑的是如何改变src. 这个是先试着通过按钮点击,来改变src. <!DOCTYPE ht ...
利用swiper在vue中做轮播图，并改变轮播图的原有箭头、图片等内容
目标:利用swiper在vue中做轮播图,并改变轮播图的原有箭头.图片等内容. 实现效果:1.点击左右箭头可切换图片. 2.点击后图片出现最左侧样式效果,只有被点击的图片有此效果,不被点击恢复默认效果 ...
web大二实训作业：校园运动会网站设计——运动会图片轮播图片遮罩特效(4页)体育 HTML+CSS+JavaScript HTML5期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）
一.轮播图要实现的效果: 实现点击小圆点.图片滑动.小圆点样式改变二.轮播图实现效果步骤: 1.利用html+css完成轮播图片,底部小点的整体效果的布局. 2.通过原生js完成图片轮播,无缝自动切 ...
javascript点击按钮循序和循环播放轮播图片
循序和循环播放轮播图片 <style>* {padding: 0;margin: 0;}#place{width: 800px;text-align: center;margin: 0 a ...
java 图片手动切换_JavaScript学习案例之手动切换轮播图片
javascript学习案例之手动切换轮播图片效果图: 思路: 1.先做界面 1.1制作按钮及点击触发事件 1.2引入一张图片 2.书写css 2.1跳转p盒子的布局(宽.高.边框线.水平居中.文字 ...
用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
vue-awesome-swiper实现轮播图片
前言最近在学习Node.js (Express.js) + Vue.js (Element UI) 全栈开发王者荣耀手机端官网和管理后台时,学习到第三章 3.7-首页顶部轮播图片(vue-swipp ...
JavaScript模拟轮播图效果
轮播图相信小伙伴们应该不会陌生吧~ 就是网站中间的那个会定时切换的商品图今天咱们就来模拟一个轮播图~当然效果不是那么美观小伙伴们不要嫌弃哈~ 那么咱们开动了,额~先准备好几章轮播图片(直接在网上 ...

JavaScript做轮播图片（2）

JavaScript做轮播图片（2）相关推荐

最新文章

热门文章