简易切换图片效果和简易年历

最新推荐文章于 2019-08-24 17:29:02 发布
最新推荐文章于 2019-08-24 17:29:02 发布
阅读量264 收藏
点赞数
分类专栏： js简单案例 文章标签： 切换图片
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41224512/article/details/86427163
版权

图片切换：

<head>
	<meta charset="UTF-8">
	<title>图片切换</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		
		div {
			width: 500px;
			margin: 50px auto;
			padding: 10px;
			background: greenyellow;
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="box">
		<p id="info">图片总共 5 张，当前为第 1 张</p>
		<img src="img/img01.jpg" alt="狗狗" />
		<button id="prev">上一张</button>&nbsp;&nbsp;&nbsp;
		<button id="next">下一张</button>
	</div>

	<script type="text/javascript">
		//var oBox=document.getElementById("box");
		//var oImg=document.getElementsByTagName("img")[0];
		window.onload = function() {
			var prev = document.getElementById("prev");
			var next = document.getElementById("next");
			var oImg = document.getElementsByTagName("img")[0];
			var imgArr = ["img/img01.jpg", "img/img02.jpg", "img/img03.jpg", "img/img04.jpg", "img/img05.jpg"]
			var index = 0;
			var oP = document.getElementById("info");
			//info.innerHTML="图片总共 " + imgArr.length +"，当前为第 '+(index + 1)+' 张"
			prev.onclick = function() {
				index--;
				if(index < imgArr.length - 1) {

					index = imgArr.length - 1;
					index = 0;
				}
				oImg.src = imgArr[index];
				info.innerHTML = "图片总共 " + imgArr.length + "张，当前为第" + (index + 1) + "张";
			}
			next.onclick = function() {
				index++;
				if(index > imgArr.length - 1) {
					index = 0;
				}
				oImg.src = imgArr[index];
				info.innerHTML = "图片总共 " + imgArr.length + "张，当前为第 " + (index + 1) + "张";
			}
		}
	</script>
</body>

简易年历

<!doctype html>

<head>
	<title></title>
	<meta charset="utf-8" />
	<style type="text/css">
		body,
		ul,
		li,
		h2,
		p {
			margin: 0px;
			padding: 0px;
		}
		
		#div1 {
			width: 200px;
			height: 200px;
			background: #ccc;
		}
		
		.calendar {
			width: 240px;
			height: 345px;
			background: #ccc;
			margin: auto;
		}
		
		.calendar ul {
			list-style: none;
			width: 232px;
			height: 260px;
			margin: 0px;
			padding: 0px;
		}
		
		.calendar ul li {
			width: 45px;
			height: 65px;
			background: #333;
			float: left;
			display: inline;
			margin-left: 11px;
			margin-top: 10px;
			border: 1px solid #ccc;
			text-align: center;
			color: #FFF;
		}
		
		.calendar ul li:hover {
			border: 1px solid #000;
		}
		
		.text {
			background: #fff;
			margin: 10px;
			padding-bottom: 10px;
			height: 45px;
		}
		
		.text h2 {
			display: inline;
		}
		
		.active {
			background: #FFF !important;
			color: #C03 !important;
		}
	</style>

</head>

<body>

	<div id="tab" class="calendar">
		<ul>
			<li class="active">
				<h2>1</h2>
				<p>JAN</p>
			</li>
			<li>
				<h2>2</h2>
				<p>FER</p>
			</li>
			<li>
				<h2>3</h2>
				<p>MAR</p>
			</li>
			<li>
				<h2>4</h2>
				<p>APR</p>
			</li>
			<li>
				<h2>5</h2>
				<p>MAY</p>
			</li>
			<li>
				<h2>6</h2>
				<p>JUM</p>
			</li>
			<li>
				<h2>7</h2>
				<p>JUL</p>
			</li>
			<li>
				<h2>8</h2>
				<p>AUG</p>
			</li>
			<li>
				<h2>9</h2>
				<p>SEP</p>
			</li>
			<li>
				<h2>10</h2>
				<p>OCT</p>
			</li>
			<li>
				<h2>11</h2>
				<p>NOV</p>
			</li>
			<li>
				<h2>12</h2>
				<p>DEC</p>
			</li>
		</ul>
		<div class="text">

		</div>
	</div>
	<script type="text/javascript">
		window.onload = function() {      
			var arr = ["0101", "0202", "0303", "0404", "0505", "0606", "0707", "0808", "0909", "1010", "1111", "1212"];    
			var oDiv = document.getElementById("tab");    
			var oLi = document.getElementsByTagName("li");    
			var aDiv = document.getElementsByClassName("text")[0];
			aDiv.style.color = " #C03";    
			for(var i = 0; i < oLi.length; i++) {     
				oLi[i].index = i;
				  
				oLi[i].onmouseover = function() {       
					for(var j = 0; j < oLi.length; j++) {         
						oLi[j].className = '';       
					}       
					this.className = 'active';       
					aDiv.innerHTML = '<p>' + arr[this.index] + '</p>';
				}     
			}
		}
	</script>
</body>
fengGer的bugs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
不错的日历视图，可以上下滑动切换月份，可以点击某一天，进入查看该天的事件（按小时分）。可以添加事件。
06-04
不错的日历视图，可以上下滑动切换月份，可以点击某一天，进入查看该天的事件（按小时分）。可以添加事件。
android+日历翻页动画效果,图片类似日历翻动效果动画？
weixin_32256861的博客
05-28 462
test.card {width: 200px;}.box {position: relative;perspective: 1000px;}.box .slide {width: 100%;height: 200px;position: absolute;top: 0;left: 0;}.box .slide img {width: 100%;height: 100%;}.box .slide ...
使用JavaScript实现简单的万年历
weixin_45195822的博客
08-24 1015
使用JavaScript实现简单的万年历 效果如下： 点击每个月份时改变相应样式，以及文字内容。 先写出大致结构： <body> <div id="tab" class="calendar"> <ul id="box"> <li class="active"><h2>1</h2&gt...
一段简洁的万年历js
08-28
非常简洁的万年历，用js实现，代码非常少。
js制作简易年历完整实例
10-24
主要介绍了js制作简易年历的方法,包括实现的思路以及js、css与html各个部分的实现技巧,需要的朋友可以参考下
JAVA上百实例源码以及开源项目源代码
12-11
Java绘制图片火焰效果 1个目标文件 摘要:Java源码,图形操作,火焰效果 Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、...
123个微信小程序源码.zip
06-25
movecss效果 Railay：整体框架 redux绑定 TCP,IP长连接 todo list v2ex 一个（仿） 一元夺宝主页设计 万年历 下拉刷新，tab切换 东航订机票 事项助手 二维码生成器 云笔记 五十音图 五险一金计算 人脸检测 今日头条 ...
JAVA上百实例源码以及开源项目
01-03
　Java绘制图片火焰效果，源代码相关注释：前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...
简易年历
bahuanpu8594的博客
06-01 139
利用原生js我们可以做一个简易的年历。 效果如下图所示： css代码如下： <style type="text/css"> * { padding: 0; margin: 0; } li { list-style: none; } body { background: #f6f9fc; font-family: arial; } .calendar ...
简单干净的万年历
路过的Blog
11-26 4855
网上流行的万年历应用不是太过强大而过于臃肿就是功能太过简单，总之没有符合心意的应用， 那就自己写一个吧，经过不知多少天的业余时间编写测试，目前使用还是比较不错的，就放出来分享下吧， 定义了几种功能的闹钟，可以农历阳历定义，可以进行日常记录，有轮班记录，本来想加入天气功能的， 但发现有款Pure天气，感觉太棒了，很符合我的要求，就不加该功能了，就是纯粹的万年历APP。 没有多余的权限 an
PyQt5学习（5）：日历 QCalendrWidget
spider_man
06-24 483
参考：https://blog.csdn.net/jia666666/article/details/81588749 QCalendar是一个日历控件。它提供一个基于月份的视图，允许用户通过鼠标或键盘选择日期，默认选中的是今日的日期，也可以对日期的范围进行规定 import sys from PyQt5.QtWidgets import * from PyQt5.QtGui im...
JavaScript - 简易年历 -
weixin_41170223的博客
12-13 604
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
简易年历卡
aaa小二
05-15 502
js鼠标事件
js日历简单版
日常分享
07-05 2943
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-
JS实现简单日历含下一月和上一个月的切换
DJun的博客
10-16 8942
这里只是一个简单的原创实例，目的是了解一下日历的基本原理。 如果您实在需要实现豪华美观的版本，可以到https://www.layui.com/laydate/下载好用开源的bootstrap日历控件的实例代码。https://blog.csdn.net/qq_28633249/article/details/77142352这篇博客详细讲解了这个控件的具体使用方法，这里也推荐给大家。 声明：...
Qt浅谈之六：日历(QCalendarWidget)
热门推荐
乌托邦
06-26 3万+
一、简介 Qt的demo中有CalendarWidget的里，本程序将其国际化，并随时隐藏不必要的设计部件，根据网上的例子增加了一些配置按钮和公历对农历的一些转换，并修复了一些故障。主要目的是掌握其布局的紧凑，并熟悉一些部件的隐藏操作。 二、运行图 （1）程序运行，显示当前的日历，如下图1所示。 三、详解 1、时钟按钮 点击第二个按钮为时钟按钮（第一个按钮为回到...
基于stm32单片机的简易万年历的设计
最新发布
12-19
基于STM32单片机的简易万年历是一种可以显示任何日期的小型设备，能够自动计算并显示星期、月份和年份。该设计需要一个LCD显示屏来显示日期信息，并且需要一个实时时钟模块来保持时间信息。此外，还需要一些按钮用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值