JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片

更新時(shí)間：2022年07月12日 10:18:57 作者：YannC97

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

JS實(shí)現(xiàn)點(diǎn)擊button按鈕切換圖片的具體代碼，供大家參考，具體內(nèi)容如下

放暑假在家打算學(xué)習(xí)html/css/js制作網(wǎng)頁(yè)，只有html/css的一些基礎(chǔ)。實(shí)現(xiàn)效果如圖：

這個(gè)網(wǎng)頁(yè)很簡(jiǎn)單，是用Dreamweaver寫(xiě)的，但是是通過(guò)自己做的，算是對(duì)JS的一個(gè)入門(mén)案列。

最初的想法是是做一輪播效果，但是剛開(kāi)始學(xué)JS發(fā)現(xiàn)有很多問(wèn)題，所以就做了一個(gè)簡(jiǎn)單的圖片切換。

body部分：

<body>
<h1>JS實(shí)現(xiàn)圖片的切換</h1>
<div class="container">
? <div class="one">
? ? <div class="one-left">
? ? ? <button id="pre"><b><</b></button>
? ? </div>
? ? <div class="one-center">
? ? ? <ul>
? ? ? ? <li style="display:none" id="a"><img src="images/1.jpg" ?width="600" height="300"></li>
? ? ? ? <li style="display:none" id="b"><img src="images/2.jpg" width="600" height="300"></li>
? ? ? ? <li style="display:none" id="c"><img src="images/3.jpg" width="600" height="300"></li>
? ? ? ? <li style="display:block" id="d"><img src="images/4.jpg" width="600" height="300"></li>
? ? ? </ul>
? ? </div>
? ? <div class="one-right">
? ? ? <button id="next"><b>></b></button>
? ? </div>
? </div>
</div>
</body>

JS部分：

<script language="javascript">
? var a=document.getElementById("a");
? var b=document.getElementById("b");
? var c=document.getElementById("c");
? var d=document.getElementById("d");
? var b1=document.getElementById("pre");
? var b2=document.getElementById("next");
? var num=4;
? b1.onclick=function(){ ??
? ? ? num--;
? ? ? if(num<1)
? ? ? ? num=4;
? ? ? panduan();
? }
? ?b2.onclick=function(){
? ? ? ? num++;
? ? ? ? if(num>4)
? ? ? ? ? num=1;
? ? ? ? panduan(); ? ?
? }
? function panduan(){
? ? ? if(num==1){
? ? ? ? ? a.style.display="block";
? ? ? ? ? b.style.display="none";
? ? ? ? ? c.style.display="none";
? ? ? ? ? d.style.display="none";
? ? ? }
? ? ? if(num==2){
? ? ? ? ? a.style.display="none";
? ? ? ? ? b.style.display="block";
? ? ? ? ? c.style.display="none";
? ? ? ? ? d.style.display="none";
? ? ? }
? ? ? if(num==3){
? ? ? ? ? a.style.display="none";
? ? ? ? ? b.style.display="none";
? ? ? ? ? c.style.display="block";
? ? ? ? ? d.style.display="none";
? ? ? }
? ? ? if(num==4){
? ? ? ? ? a.style.display="none";
? ? ? ? ? b.style.display="none";
? ? ? ? ? c.style.display="none";
? ? ? ? ? d.style.display="block";
? ? ? }
? } ??
</script>

CSS部分：

*{
? ? margin:0;
? ? padding:0;
}
h1{
? ? text-align:center;
}
li{
? ? list-style:none;
? ? float:left;
}
.container{
? ? width:1000px;
? ? height:1000px;
? ? margin:0 auto;
}
.one{
? ? width:700px;
? ? height:400px;
? ? margin:100px auto;
}
.one-center{
? ? width:600px;
? ? height:300px;
? ? float:left;
}
.one-left{
? ? width:50px;
? ? height:300px;
? ? float:left;
}
.one-right{
? ? width:50px;
? ? height:300px;
? ? float:right;
}
button{
? ? width:50px;
? ? height:300px;
? ? background-color:#999;
? ? border:none;
? ? outline:none;
}
button:hover{
? ? background-color:#666;
}

這里面有兩個(gè)關(guān)鍵點(diǎn)，一是如何隱藏圖片，二是button按鈕點(diǎn)擊和樣式。

1.圖片的隱藏，我最初想的是用hidden來(lái)實(shí)現(xiàn)圖片的隱藏，設(shè)置hidden屬性的真假值來(lái)實(shí)現(xiàn)，但是發(fā)現(xiàn)只要給某個(gè)標(biāo)簽設(shè)置hidden，這個(gè)標(biāo)簽就不會(huì)顯示，我不知道可以通過(guò)JS刪除和添加hidden屬性，因此我就改用style.display="none"和style.display="inline"來(lái)實(shí)現(xiàn)隱藏和顯示。style.display="none"會(huì)隱藏該標(biāo)簽，而且隱藏后該標(biāo)簽不占位。后來(lái)我又查找發(fā)現(xiàn)可以通過(guò)a.style.visibility="hidden";和a.style.visibility="visible";來(lái)實(shí)現(xiàn)隱藏和顯示，a.style.visibility="hidden";方法隱藏了該標(biāo)簽，但是該標(biāo)簽還是會(huì)占位。

2.第二個(gè)就是button屬性，主要的問(wèn)題時(shí)button樣式的問(wèn)題，如何才能做一個(gè)好看的button，通過(guò)查找找到了設(shè)置button相關(guān)的值。

border:none; 設(shè)置按鈕無(wú)邊框

outline:none;消除按鈕點(diǎn)擊后出現(xiàn)的表示被點(diǎn)擊的邊框

background：url(...)按鈕背景圖片

text-shadow: 0 1px 1px rgba(0,0,0,.3);文字陰影

box-shadow: 0 5px 7px rgba(0,0,0,.2);按鈕陰影

border-radius:15px;按鈕邊框圓角

接下來(lái)就是想辦法實(shí)現(xiàn)輪播效果了，慢慢來(lái)吧！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: