<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pic{
width: 300px;
height: 400px;
background-color: #f1ffd6;
margin: 0px auto;
position: relative;
}
.pic span,.pic p{
position: absolute;
background-color: #fffc9b;
text-align: center;
width: 100%;
height: 20px;
line-height: 20px;
}
.pic span{
top: 0px;
}
.pic p{
margin: 0px;
padding: 0px;
bottom: 0px;
}
.pic img{
position: absolute;
width: 100%;
height: 400px;
}
.pic ul{
list-style: none;
position: absolute;
left: 300px;
}
.pic ul li{
width: 20px;
height: 20px;
background-color: gray;
margin-bottom: 10px;
}
.as{
background-color: orange!important;
}
</style>
</head>
<body>
<div class="pic">
<img src="lunbo/image/1.jpg" alt=""/>
<span>图片的数量</span>
<p>图片的描述</p>
<ul>
</ul>
</div>
<script>
var odiv = document.getElementsByClassName("pic")[0];
var oimg = odiv.getElementsByTagName("img")[0];
var ospan = odiv.getElementsByTagName("span")[0];
var op = odiv.getElementsByTagName("p")[0];
var oul = odiv.getElementsByTagName("ul")[0];
var liArr = oul.getElementsByTagName("li");
/*模拟数据库取出数据*/
var imgarr = ["lunbo/image/1.jpg","lunbo/image/2.jpg","lunbo/image/3.jpg","lunbo/image/4.jpg"];
var textArr =["图片1","图片2","图片3","图片4"];
/*根据图片动态生成按钮*/
var str="";
for(var i=0;i<imgarr.length;i++){
str+="<li></li>";
}
oul.innerHTML = str;
/*初始化*/
var num=0;
function show(){
ospan.innerHTML = num+1+"/"+imgarr.length;
op.innerHTML = textArr[num];
oimg.src=imgarr[num];
/*不知道上次点的那个按钮,所以就一次性把所有的样式都去掉。在选中某一个li增加样式*/
for(var k=0;k<imgarr.length;k++){
liArr[k].className = "";
}
liArr[num].className = "as";
}
show();
var time;
function setint(){
time = setInterval(function(){
++num;
if(num==imgarr.length){
num=0;
}
show();
},2000)
}
setint();
/*动态给li绑定事件,控制num下标*/
for(var j=0;j<imgarr.length;j++){
liArr[j].setAttribute("index",j);
liArr[j].onclick = function(){
num = parseInt(this.getAttribute("index"));
clearInterval(time);
show();
setint();
}
}
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.pic{
width: 300px;
height: 400px;
background-color: #f1ffd6;
margin: 0px auto;
position: relative;
}
.pic span,.pic p{
position: absolute;
background-color: #fffc9b;
text-align: center;
width: 100%;
height: 20px;
line-height: 20px;
}
.pic span{
top: 0px;
}
.pic p{
margin: 0px;
padding: 0px;
bottom: 0px;
}
.pic img{
position: absolute;
width: 100%;
height: 400px;
}
.pic ul{
list-style: none;
position: absolute;
left: 300px;
}
.pic ul li{
width: 20px;
height: 20px;
background-color: gray;
margin-bottom: 10px;
}
.as{
background-color: orange!important;
}
</style>
</head>
<body>
<div class="pic">
<img src="lunbo/image/1.jpg" alt=""/>
<span>图片的数量</span>
<p>图片的描述</p>
<ul>
</ul>
</div>
<script>
var odiv = document.getElementsByClassName("pic")[0];
var oimg = odiv.getElementsByTagName("img")[0];
var ospan = odiv.getElementsByTagName("span")[0];
var op = odiv.getElementsByTagName("p")[0];
var oul = odiv.getElementsByTagName("ul")[0];
var liArr = oul.getElementsByTagName("li");
/*模拟数据库取出数据*/
var imgarr = ["lunbo/image/1.jpg","lunbo/image/2.jpg","lunbo/image/3.jpg","lunbo/image/4.jpg"];
var textArr =["图片1","图片2","图片3","图片4"];
/*根据图片动态生成按钮*/
var str="";
for(var i=0;i<imgarr.length;i++){
str+="<li></li>";
}
oul.innerHTML = str;
/*初始化*/
var num=0;
function show(){
ospan.innerHTML = num+1+"/"+imgarr.length;
op.innerHTML = textArr[num];
oimg.src=imgarr[num];
/*不知道上次点的那个按钮,所以就一次性把所有的样式都去掉。在选中某一个li增加样式*/
for(var k=0;k<imgarr.length;k++){
liArr[k].className = "";
}
liArr[num].className = "as";
}
show();
var time;
function setint(){
time = setInterval(function(){
++num;
if(num==imgarr.length){
num=0;
}
show();
},2000)
}
setint();
/*动态给li绑定事件,控制num下标*/
for(var j=0;j<imgarr.length;j++){
liArr[j].setAttribute("index",j);
liArr[j].onclick = function(){
num = parseInt(this.getAttribute("index"));
clearInterval(time);
show();
setint();
}
}
</script>
</body>
</html>