javascript(17)练习-图片轮换

于 2020-04-15 20:32:42 发布
阅读量172 收藏
点赞数
分类专栏： javascipt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43752554/article/details/105543724
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0px;
				padding:0px;
			}
			#box1{
				width:360px;
				background-color: #5F9EA0;
				overflow: hidden;
			}
			#ig{				
				width:360px;
				height:300px;
			}
			#box1 button{
				float: left;
			}
			#box1 #but01{
				margin-left:130.5px;
				margin-right:10px;
			}
			#box1 h1{
				text-align: center;
				font-family:"微软雅黑";
				font-size:30px;
			}
			
			
		</style>
		<script>
			window.onload=function(){
				var but01=document.getElementById("but01");
				var but02=document.getElementById("but02");
				var box=document.getElementById("box1");
				var h1=document.getElementsByTagName("h1")[0];
				var ig=document.getElementById("ig");
				//存放图片
				var imgArr=["img/0.jpg","img/1.jpg","img/2.jpg",
				    			"img/3.jpg","img/4.jpg","img/5.jpg",
				    				"img/6.jpg","img/7.jpg","img/8.jpg",
				    					"img/9.jpg"];
				var index=0;
				but01.onclick=function(){
					index--;
					//检测index的大小,如果小于0，就换成最后一张
					if(index<0){
						index=imgArr.length-1;
					}else{
					//检测index有没有越界（是否大于数组长度）
						index%=imgArr.length;
					}
					//改变上面的h1，索引从0开始，图片从1开始，所以+1
					h1.innerHTML="第"+(index+1)+"张";
					//改变图源
					ig.src=imgArr[index];
					
				};
				but02.onclick=function(){
					index++;
					//检测index的大小，如果超出了就循环
					
						index%=imgArr.length;
					
					//切换的时候改变内容
					h1.innerHTML="第"+(index+1)+"张";
					//改变图源
					ig.src=imgArr[index];
					
				};
			};
		</script>
	</head>
	<body>
		<div id="box1">
			<h1>第1张</h1>
			<img id="ig" src="img/0.jpg"> 
			<button id="but01">上一张</button>
			<button id="but02">下一张</button>
		</div>
		
	</body>
</html>
冲啊Javascripit
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript实现图片轮换功能方式三
H_W_1212的博客
12-20 1037
关注重工黑大帅，学习不迷路 先看效果： 图片素材下载（后面两种图片轮换素材也是这个）： 链接： https://pan.baidu.com/s/1EnQkPvp80sqtD0IbANj9sA 提取码： m7t3 public.css: /* CSS Document */ *{ margin: 0; padding: 0; } ul,li,ol{ list-style: none; } a{ text-decoration: none; } img{ border: 0; } .clear
Javascript实现图片轮换功能方式一
H_W_1212的博客
12-02 765
关注重工黑大帅，学习不迷路 先看效果： 图片素材下载： 链接： https://pan.baidu.com/s/1EnQkPvp80sqtD0IbANj9sA 提取码： m7t3 public.css: /* CSS Document */ *{ margin: 0; padding: 0; } ul,li,ol{ list-style: none; } a{ text-decoration: none; } img{ border: 0; } .clears{ clear: both;
HTML练习二--动态加载轮播图片
dhmwidg13313的博客
07-01 188
接上一篇https://www.cnblogs.com/shuaimeng/p/11106655.html demo下载： https://pan.baidu.com/s/1dhvzHwTHKiguyMD6sdSJgg tevd 效果图： html： <!--轮播图片--> <div class="tempWrap" id="tempWra...
javascript实现图片轮换效果
浪子回头
09-15 2591
图片轮换广告 img { position:absolute; width:350px; height:263px; z-index:2; left:100px; top: 13px; } -->     var NowFrame = 1; //设置显示的第一个图片     var MaxFrame = 4; //设置显示图片的个数 function sho
网站常用的一种JS制作的幻灯片
TCM-caleng
07-04 1934
网站常用的一种JS制作的幻灯片webjx.comvar widths=600;var heights=400;var counts=3; //显示的图片数img1=new Image ();img1.src=1.jpg;img2=new Image ();img2.src=2.jpg
DOM编程练习（二）
小圣_fighting的博客
03-12 1026
2、 广告轮播。 有四张图片，页面加载后，先在页面上显示第一张图片 当前图片所对应的数字编号也高亮显示。 每隔3s，自动更换页面上的图片显示，并修改图片所对应的数字编号的样式 一轮显示完毕后，重复下一轮显示 鼠标移入图片时，停止图片轮换，鼠标移出图片时，继续图片轮换 鼠标移入图片下方的某个数字编号，则显示该数字所对应的图片，且停止图片轮换 鼠标移出图片下方的某个数字编号，则继续图
DOM事件练习 I
weixin_30341745的博客
08-16 143
目录 input框动态显示事件 红绿灯模拟 顶部广告栏关闭 鼠标悬停IMG上时，更换另一张图片 悬浮框自动出现 模态框案例 input框动态显示事件 1 <head> 2 <meta charset="UTF-8"> 3 <title>动态显示时间</title> 4 ...
javascript练习
09-20
3、 页面中五张轮换播放的最新产品图片 4、 用户名和密码不能为空，用户名只能是数字和字母，密码长度长度大于6位,如果填写不正确用消息框提示错误的消息,并不提交表单如果正确则提交表单 5、 注意代码的规范 6、 ...
jquery实现简单的轮换出现效果实例
10-23
标题中的“jquery实现简单的轮换出现效果实例”指的是使用jQuery库来创建一个基本的轮播图或切换效果，使得图片能够按照预设的方式交替显示。描述提到的是利用jQuery处理图片样式的切换，以达到视觉上的轮换效果。...
用于练习的原生js五子棋
10-04
创建一个棋盘类（`Chessboard`），包含棋盘状态、棋子颜色轮换、胜负判断等功能。棋子类（`Piece`）可以表示单个棋子，记录其颜色和位置。 6. **游戏逻辑**：编写判断胜负的函数，检查棋盘上的每一条线，看是否有五...
网页设计与开发——html css javascript ppt幻灯片
11-02
它们通常包含详细的讲解、示例代码和练习，帮助学习者逐步理解并掌握HTML、CSS和JavaScript的用法。通过PPT，讲师可以清晰地展示每个技术的语法结构，以及如何将它们组合在一起创建功能丰富的网页。 在实际工作中，...
desafios-bootcamps-dio:来自 Digital Innovation One 训练营的 C#、Java、JavaScript、Kotlin、Python 和 Ruby 挑战
07-23
比赛时间空气菜单年底前的披萨时间转换天数多臂时间马车轮换 用 C# 求解算法 巴Scala公式科辛尼亚德布埃诺空气菜单 C# 中的基本故障排除 参观展会发推特成绩验证 .NET 故障排除 成绩验证计划多少木薯？ 超市购物...
DOM编程练习（三）
小圣_fighting的博客
03-12 884
3、 简单计算器。 制作一个简单计算器，实现基础加减法。 ================================答案========================================= html代码： 无标题文档 6.简单计算器 var numresult; var str; function digtal(nu
继续JS之DOM对象二
dichengpai8268的博客
10-10 97
前面在JS之DOM中我们知道了属性操作，下面我们来了解一下节点操作。很重要！！ 一、节点操作 创建节点：var ele_a = document.createElement('a');添加节点：ele_parent.appendChild(ele_img);删除节点：ele_parent.removeChild(ele_p);替换节点：ele_parent.replaceChild(...
DOM基础操作（二）
weixin_30924087的博客
11-25 98
插入操作 1.appendChild(child); 这个是父级调用的方法，它会将child元素插入到父级里面，而且是放到逻辑后面的位置上。 1 div.appendChild(text); 2 div.appendChild(comment); JavaScript; “复制代码”); “查看纯文本代码”); “返回代码高亮”) 这样div里面就会有一行文本一...
使用jQuery快速高效制作网页交互特效 第五章 上机练习四 制作广告图片轮播切换效果
热门推荐
闲来无事的博客
12-19 1万+
轮播应有的功能大致都有，分享给一些在学的朋友参考学习。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt; 广告图片轮播切换&lt;/title&gt; &lt;link rel=&quo
dom操作练习
weixin_30905981的博客
04-16 151
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ ...
javascript(1):HelloWorld (js输出文字的三种方式）
半个脑子的博客
04-12 6869
在javascript中： 1.在控制台中，输出内容： console.log("Hello World"); 2.在文档中输出内容： document.write("Hello World"); 3.警告框中弹出内容： alert("Hello World"); 总结：三种方法各有不同，根据学习经验其中的1，3大多用来测试js代码。2的话很少用 ps:此为个人学习笔记，如果有不对的地方，或...
javascript(7) toString()方法，出现Undefined错误
半个脑子的博客
04-14 2847
如果将对象直接打印的话，就会出现[Object Object]，实际上这个时候对象会调用toString()方法，如果没有这个方法，就会出现[Object Object]. 如果希望有打印出的东西，我们可以手动添加toString()方法 function Person(name,age){ this.name=name; this.age=age; } Perso...
javascript变更background-Image图片
最新发布
03-29
```javascript document.getElementById("myElement").style.backgroundImage = "url('path/to/image.jpg')"; ``` 其中，要更改背景图片的元素的ID应该替换为“myElement”，并且路径应替换为所需图像的实际路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值