首先要注意的是城须，在HTML里寫js的時候也切，所有的js的內(nèi)容都要在window.onload=function(){}中
2.設(shè)置按鈕并且要在js內(nèi)部進(jìn)行獲取
3.在html里面設(shè)置img標(biāo)簽军洼，在js里獲取img亿傅，并設(shè)置img的容器栓霜，將需要切換的img圖片放在容器中
4.使用onclick屬性蜕青，使在點(diǎn)擊按鈕的時候?qū)崿F(xiàn)照片的切換苟蹈，這個function的內(nèi)容就是就是imgArr[index];
?? <script?type="text/javascript">
????????/*
?????????*實(shí)現(xiàn)點(diǎn)擊按鈕切換
?????????*/
????????window.onload?=?function()?{?//確保整個事件在頁面加載完成之后執(zhí)行
????????????var?btn1?=?document.getElementById("btn1");
????????????var?btn2?=?document.getElementById("btn2");
????????????var?img?=?document.getElementsByTagName("img")[0];
????????????var?imgArr?=?["img/d4a5a51676c1f82855d63a4fc0b069ed.jpg?",
????????????????"img/83610107838ee51e9eb29685ba9b44b6.jpg?",
????????????????"img/e52c3e98602b90f198ec316dce253cba.jpg?",
????????????????"img/972fe1db817a46fc5c461337bf94d20f.jpg?",
????????????];
????????????var?index?=?0;
????????????var?info?=?document.getElementsByName("info");
????????????btn1.onclick?=?function()?{
????????????????index--;
????????????????if?(index?<?0)?{
????????????????????index?=?imgArr.length?-?1;
????????????????}
????????????????info.innerHTML?=?"一共有"?+?index?+?"張,現(xiàn)在是第"?+?(index?+?1)?+?"張";
????????????????img.src?=?imgArr[index];
????????????}
????????????btn2.onclick?=?function()?{
????????????????index++;
????????????????if?(index?>?imgArr.length?-?1)?{
????????????????????index?=?0;
????????????????}
????????????????info.innerHTML?=?"一共有"?+?index?+?"張,現(xiàn)在是第"?+?(index?+?1)?+?"張";
????????????????img.src?=?imgArr[index];
????????????}
????????};
????</script>
????<style>
????????*?{
????????????margin:?0px;
????????????padding:?0px;
????????}
????????.pic?{
????????????width:?2450px;
????????????height:?1000px;
????????????margin:?100px?auto;
????????????padding:?30px;
????????????background-color:?seagreen;
????????????overflow:?hidden;
????????}
????????button?{
????????????width:?200px;
????????????text-align:?center;
????????}
????</style>
</head>
<body>
????<div?class="pic">
????????<p?class="info"></p>
????????<img?src="img/d4a5a51676c1f82855d63a4fc0b069ed.jpg?"?alt="可樂">
????????<button?id="btn1">上一張</button>
????????<button?id="btn2">下一張</button>
????</div>
</body>
