1.轮播图效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图效果</title>
<script type="text/javascript">
var arr=null;
var tp = null;
var index = 0;
//当页面加载完成以后执行
window.onload=function(){
//定义一个一维数组用来存储图片
arr = ["images/d.jpg","images/q.jpg","images/c.jpg","images/b.jpg"];
//获取img元素
tp = document.getElementById("tp");
start();
}
function change(obj){
//获取用户点击的是哪个按钮
index = obj.value;
tp.src=arr[index];
}
//下一页
function next(){
//如果当前图片是最后一张
if(index==arr.length-1){
index=0;
}else{
index=index+1;
}
tp.src=arr[index];
}
//上一页
function up(){
//如果当前图片是最后一张
if(index==0){
index=arr.length-1;
}else{
index=index-1;
}
tp.src=arr[index];
}
//自动开始轮播
function start(){
var timer = setInterval("next()",3000);
}
</script>
</head>
<body>
<img src="images/d.jpg" alt="" id="tp">
<input type="button" value="上一页" onClick="up()">
<input type="button" value="0" onClick="change(this)">
<input type="button" value="1" onClick="change(this)">
<input type="button" value="2" onClick="change(this)">
<input type="button" value="3" onClick="change(this)">
<input type="button" value="下一页" onClick="next()">
</body>
</html>
2.cursor：pointer（鼠标移动上去变小手）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#d1{
height: 200px;
200px;
background-color: red;
}
#d1:hover{
cursor:pointer;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
</html>