<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} .photo {
width: 400px;
height: 200px;
margin: 50px;
position: relative;
} .main {
width: 400px;
height: 200px;
position: relative;
} .main1 li {
width: 400px;
height: 200px;
list-style-type: none;
} .pto {
position: absolute;
left: 0;
top: 0;
} .pto1 {
width: 400px;
height: 200px;
background: red;
} .pto2 {
width: 400px;
height: 200px;
background: pink;
display: none;
} .pto3 {
width: 400px;
height: 200px;
background: blue;
display: none;
} .btn {
width: 30px;
height: 30px;
position: absolute;
} .btn1 {
left: 0;
top: 85px;
background: url("img/left.png");
} .btn2 {
right: 0;
top: 85px;
background: url("img/right.png");
}
</style>
<script type="text/javascript" src="jiaodiantujs.js">
</script> </head> <body>
<div class="photo" id="main">
<div class="main">
<ul class="main1" id="amain">
<li class="pto pto1">one</li>
<li class="pto pto2">two</li>
<li class="pto pto3">three</li>
</ul>
</div> <span class="btn btn1" id="btn1"></span>
<span class="btn btn2" id="btn2"></span> </div>
</body> </html>
function $(id) {
return typeof id == "string" ? document.getElementById(id) : id;
}
window.onload = function() {
//老规矩,这里是定义变量
var pto = $("amain").getElementsByTagName("li");
var btnleft = document.getElementById("btn1");
var btnright = document.getElementById("btn2");
var idpto = 0;
//定义一个点击按钮背景图变色的函数,方便调用
function onpto(one, two) {
one.style.background = two;
}
//左边按钮没有鼠标移动到的时候
btnleft.onmouseenter = function() {
onpto(this, "url(img/onleft.gif) no-repeat");
}
//左边按钮鼠标移动到的时候
btnleft.onmouseout = function() {
onpto(this, "url(img/left.png) no-repeat");
}
//右边按钮没有鼠标移动到的时候
btnright.onmouseenter = function() {
onpto(this, "url(img/onright.gif) no-repeat");
}
//右边按钮鼠标移动到的时候
btnright.onmouseout = function() {
onpto(this, "url(img/right.png) no-repeat");
}
//定义一个用于图片消失的函数
function hidepto() {
for (var i = 0; i < pto.length; i++) {
pto[i].style.display = "none";
}
}
//定义一个用于图片显示的函数
function showpto(id) {
for (var i = 0; i < pto.length; i++) {
//定义一个变量id,当id=i的时候则显示图片
if (i == id) {
pto[i].style.display = "block";
}
}
}
//鼠标点击左边的时候,切图
btnleft.onclick = function() {
hidepto();
//当idpto=0的时候,下次点击则是2,而pto.length-1则是2,所以
//所以,用赋值语句给idpto重新赋值
//为什么要pto.length-1,因为.length的长度是从1开始
if (idpto == 0) {
idpto = pto.length - 1;
} else {
idpto--;
}
showpto(idpto);
}
//鼠标点击右边时,切图
btnright.onclick = function() {
hidepto();
//同理,图片显示顺序是0123
if (idpto < pto.length - 1) {
idpto++;
} else {
idpto = 0;
}
showpto(idpto);
}
}
因为是注重javascript的过程，所以html和css就不细说了