国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

3403771864 / 893人閱讀

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

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

　　其實(shí)很多時(shí)候想法與實(shí)際有差距。我們先做了一個(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;
　　}

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

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

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

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

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;按鈕邊框圓角

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


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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/128204.html

相關(guān)文章

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

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

    Zack 評(píng)論0 收藏0

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

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

    SKYZACK 評(píng)論0 收藏0

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

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

    Pink 評(píng)論0 收藏0

  • 用 jQuery 做個(gè)輪播

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

    cheukyin 評(píng)論0 收藏0

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

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

    arashicage 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<