图片切换:
<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>
<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>