亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

使用JS實現(xiàn)點擊button按鈕切換圖片具體代碼

3403771864 / 1205人閱讀

　　不廢話，直奔主題，使用JS實現(xiàn)點擊button按鈕切換圖片，實現(xiàn)效果如圖：

　　很容易實現(xiàn)吧，這個是用Dreamweaver寫的，現(xiàn)在我們就用JS的一個入門案列。

　　其實很多時候想法與實際有差距。我們先做了一個簡單的圖片切換。

　　body部分：

　　<body>
　　<h1>JS實現(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;
　　}

　　總結(jié)上面有兩個關(guān)鍵詞:一是如何隱藏圖片，二是button按鈕點擊和樣式。

      1.圖片的隱藏，說實話，最初想用hidden來實現(xiàn)圖片的隱藏，設(shè)置hidden屬性的真假值來實現(xiàn)，可發(fā)現(xiàn)只要給某個標(biāo)簽設(shè)置hidden，但這個標(biāo)簽沒顯示，其實當(dāng)時也不知道通過JS刪除和添加hidden屬性，只是稍稍做修改style.display="none"和style.display="inline"來實現(xiàn)隱藏和顯示。style.display="none"會隱藏該標(biāo)簽，而且隱藏后該標(biāo)簽不占位。后來我又查找發(fā)現(xiàn)可以通過a.style.visibility="hidden";和a.style.visibility="visible";來實現(xiàn)隱藏和顯示，a.style.visibility="hidden";方法隱藏了該標(biāo)簽，但是該標(biāo)簽還是會占位。

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

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

outline:none;消除按鈕點擊后出現(xià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;按鈕邊框圓角

好吧，都說完了，現(xiàn)在就是看看實際效果。


文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/128204.html

相關(guān)文章

  • 授人以漁式解析原生JS寫輪播圖

    摘要：鼠標(biāo)放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，鼠標(biāo)移開時左右箭頭隱藏掉并且自動輪播。核心原理清除定時器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動輪播函數(shù)。 需求與分析 需求：循環(huán)無縫自動輪播五張圖，按左右箭頭可以手動切換圖片，鼠標(biāo)點擊輪播圖下面按鈕 1 2 3 4 5會跳轉(zhuǎn)到對應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，...

    Zack 評論0 收藏0

  • 授人以漁式解析原生JS寫輪播圖

    摘要：鼠標(biāo)放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，鼠標(biāo)移開時左右箭頭隱藏掉并且自動輪播。核心原理清除定時器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動輪播函數(shù)。 需求與分析 需求：循環(huán)無縫自動輪播五張圖，按左右箭頭可以手動切換圖片，鼠標(biāo)點擊輪播圖下面按鈕 1 2 3 4 5會跳轉(zhuǎn)到對應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，...

    SKYZACK 評論0 收藏0

  • 授人以漁式解析原生JS寫輪播圖

    摘要：鼠標(biāo)放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，鼠標(biāo)移開時左右箭頭隱藏掉并且自動輪播。核心原理清除定時器，綁定事件，重構(gòu)下代碼封裝出往右往左輪播函數(shù)和自動輪播函數(shù)。 需求與分析 需求：循環(huán)無縫自動輪播五張圖，按左右箭頭可以手動切換圖片，鼠標(biāo)點擊輪播圖下面按鈕 1 2 3 4 5會跳轉(zhuǎn)到對應(yīng)的第1 2 3 4 5張圖片。鼠標(biāo)放到輪播圖的圖片上時不再自動輪播并且左右箭頭顯示出來，...

    Pink 評論0 收藏0

  • 用 jQuery 做個輪播

    摘要：初次體驗之后，體驗一下強大之處，做一個簡單的輪播，實現(xiàn)圖片切換。點擊按鈕切換輪播頁面上面有三個標(biāo)簽用兩個便簽包裹好，是用來布局的，一般不在布局的標(biāo)簽上面做任何操作，是用來做輪播窗口的。是一個整數(shù)，指示元素的位置，以為基數(shù)。 初次體驗jQuery 之后，體驗一下jQuery強大之處，做一個簡單的輪播，實現(xiàn)圖片切換。 點擊按鈕切換輪播 頁面上面有三個img標(biāo)簽用兩個div便簽包裹好，cla...

    cheukyin 評論0 收藏0

  • 360前端星學(xué)習(xí)筆記-如何寫‘好’JavaScript

    摘要：前言如何寫好這門課是由技術(shù)專家月影老師講的?？刂屏髟O(shè)計原則為什么要用到事件機制呢因為要降低結(jié)構(gòu)之間的耦合度，如果不這樣做的話，我們需要做雙向的操控的。 前言 《如何寫‘好’javascript》這門課是由360技術(shù)專家月影老師講的。 這堂課的ppt 說實話，我一直在糾結(jié)要不要寫關(guān)于js的文章，因為對于js來說，我的實際經(jīng)驗不足，更不要說面向?qū)ο缶幊膛c函數(shù)式編程了，對于過程抽象與行為抽象...

    arashicage 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<