2019-11-15 seo達人
css:
*{margin:0;padding:0;}
background: rgb(201, 230, 128);text-align: center;}
html:
<body>
<div id="tu">
<P id="info"></P>
<img src="jiao.jpg" alt="冰棒">
<input type="button" id="yi" value="第一張">
<input type="button" id="er" value="第二張">
</div>
</body>
javascript:
window.onload = function(){
var yi = document.getElementById(“yi”);
var er = document.getElementById(“er”);
var img = document.getElementsByTagName(“img”)[0];
var imgArr = [ “jiao.jpg”,“san.jpg”,“bao.jpg”,“hua.jpg”,“pei.jpg”,“tu.jpg”,“xin.jpg”,“niu.jpg”]
var index = 0 ;
var info = document.getElementById(“info”);
info.innerHTML = "一共" + imgArr.length + "張圖片,當(dāng)前第"+(index+1)+"張";
yi.onclick = function(){
index--;
if(index < 0){
index = imgArr.length - 1;
}
img.src = imgArr[index];
info.innerHTML = "一共" + imgArr.length + "張圖片,當(dāng)前第"+(index+1)+"張";
}
er.onclick = function(){
index++;
if(index > imgArr.length - 1){
index = 0;
}
img.src = imgArr[index];
info.innerHTML = "一共" + imgArr.length + "張圖片,當(dāng)前第"+(index+1)+"張";
}
}
藍藍設(shè)計的小編 http://www.0391cbd.com