最近刚学js,就做了一个可以点击切换图片,和自动播放图片的小例子,献给需要的初学者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
<script type="text/javaScript" src="js/index.js"></script>
</head>
<body>
<p>图片轮播器小实例</p>
<div id="showPic">
<img src="image/jpg-1.jpg" alt="" id="Pic">
</div>
<div class="page">
<div id="page1" class="page1">1</div>
<div id="page2" class="page2">2</div>
</div>
</body>
</html>
@charset "utf-8";
#Pic{
width: 200px;
height: 200px;
}
.page{
width: 200px;
height: 20px;
}
.page1{
float: left;
}
.page2{
float: left;
}
.page div{
width: 20px;
line-height: 20px;
border: 1px solid;
}
.page div:hover{
background: blue;
}
//把整个js文件理解成一个类,然后count是一个静态变量;
var count = 1;
function showPictureByTime(){
if(count<2){
count++;
}else{
count=1;
}
var pic = document.getElementById("Pic");
pictureName = "image/jpg-"+count+".jpg";
pic.src = pictureName;
setTimeout(showPictureByTime,2000);
}
function showPicture(pictureName,Count){
count = Count;
var pic = document.getElementById("Pic");
pic.src = pictureName;
}
window.onload = function(){
page = document.getElementById("page1");
pictureName = "image/jpg-1.jpg";
page.addEventListener("mouseover",function(){
showPicture(pictureName,1);
},false);
page2 = document.getElementById("page2");
pictureName2 = "image/jpg-2.jpg";
page2.addEventListener("mouseover",function(){
showPicture(pictureName2,2);
},false);
showPictureByTime();
}
代码有些不足,在图片自动切换和手动切换之间不是很融洽,有兴趣的朋友可以去改善它。