                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /信息排列效果

每張圖片的地址都不一樣怎么破

<!DOCTYPE html>

<html>

<head>

*{margin: 0;padding: 0;}

ul{list-style: none;}

body{font-family: "微軟雅黑";

font-size: 14px;}

a{text-decoration: none;}

/*圖片可能有多張,高度設自動*/

#box{height: auto;width: 550px;border: 1px solid #aaa; margin:0 auto;

overflow: hidden;

}

.top{height: 40px;}

.top a{

????height: 16px; width: 16px;border:1px solid #abcdef;

????display: block; float: right;margin: 5px;}

???? .btn-list-off{background:#fff url(./img/log.png)no-repeat 69% 0%;}

???? .btn-car-on{background:#fff url(./img/log.png)no-repeat 36% 80%;}

???? .btn-list-on{background:#fff url(./img/log.png)no-repeat -21px -0px;}

???? .btn-car-off{background:#fff url(./img/log.png)no-repeat -38px -32px;}

????#box ul li{height: 236px; width: 164px;border:1px solid #aaa;

????float: left;

????margin: 5px;

????/*重設高度*/

height: auto;

}

.a-img{height:164px;width: 164px;

/*內聯元素必須設置成塊級元素才能設定尺寸*/

display: block;

/*超出a的部分直接隱藏*/

overflow: hidden;

}

p a,p span{display: block;line-height: 23px;

padding-left: 10px;}

/*底部div*/

.bottom{height: 40px; line-height: 40px;

text-align: center;

background: #ccc;

}

/*增加small類*/

.small{height: 50px; width: 50px;

display: block;

float: left;

margin:5px;

}

</style>

</head>

<body>

<div>

</div>

<ul>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

</ul>

</div>

</body>

window.onload=function(){

//A.1.獲取列表和卡片模式的按鈕

var listBtn = document.getElementById("btn1");

var carBtn = document.getElementById("btn2");

var imgs = document.getElementsByTagName("img");

//A.2.綁定事件

listBtn.onclick =function(){

// A.2.1.(修改class值)

listBtn.className = "btn-list-on";

carBtn.className = "btn-car-off";

// A.2.2.改變img圖片路徑以及對應的父節點(a)的class.先遍歷獲取的img

for(var i=0;i<imgs.length;i++){

imgs[i].src="./img/small.png";

imgs[i].parentNode.className ="a-img small";

}

// B.

carBtn.onclick = function(){

listBtn.className = "btn-list-off";

carBtn.className = "btn-car-on";

for(var i=0;i<imgs.length;i++){

imgs[i].src="./img/big.png";

imgs[i].parentNode.className ="a-img";

}

<!DOCTYPE html>

<html>

<head>

*{margin: 0;padding: 0;}

ul{list-style: none;}

body{font-family: "微軟雅黑";

font-size: 14px;}

a{text-decoration: none;}

/*圖片可能有多張,高度設自動*/

#box{height: auto;width: 550px;border: 1px solid #aaa; margin:0 auto;

overflow: hidden;

}

.top{height: 40px;}

.top a{height: 16px; width: 16px;border:1px solid #abcdef;

display: block; float: right;margin: 5px;}

.btn-list-off{background:#fff url(./img/log.png)no-repeat 69% 0%;}

.btn-car-on{background:#fff url(./img/log.png)no-repeat 36% 80%;}

.btn-list-on{background:#fff url(./img/log.png)no-repeat -21px -0px;}

.btn-car-off{background:#fff url(./img/log.png)no-repeat -38px -32px;}

#box ul li{height: 236px; width: 164px;border:1px solid #aaa;

float: left;

margin: 5px;

/*重設高度*/

height: auto;}

.a-img{height:164px;width: 164px;

/*內聯元素必須設置成塊級元素才能設定尺寸*/

display: block;

/*超出a的部分直接隱藏*/

overflow: hidden;

}

p a,p span{display: block;line-height: 23px;

padding-left: 10px;}

/*底部div*/

.bottom{height: 40px; line-height: 40px;

text-align: center;

background: #ccc;

}

/*增加small類*/

.small{height: 50px; width: 50px;

display: block;

float: left;

margin:5px;

}

</style>

</head>

<body>

<div>

</div>

<ul>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

<li>

<div>

</a>

<p>

<span>21個共同好友</span>

</p>

</div>

<div>未分組的好友</div>

</li>

</ul>

</div>

</body>

window.onload=function(){

//A.1.獲取列表和卡片模式的按鈕

var listBtn = document.getElementById("btn1");

var carBtn = document.getElementById("btn2");

var imgs = document.getElementsByTagName("img");

//A.2.綁定事件

listBtn.onclick =function(){

// A.2.1.(修改class值)

listBtn.className = "btn-list-on";

carBtn.className = "btn-car-off";

// A.2.2.改變img圖片路徑以及對應的父節點(a)的class.先遍歷獲取的img

for(var i=0;i<imgs.length;i++){

imgs[i].src="./img/small.png";

imgs[i].parentNode.className ="a-img small";

}

// B.

carBtn.onclick = function(){

listBtn.className = "btn-list-off";

carBtn.className = "btn-car-on";

for(var i=0;i<imgs.length;i++){

imgs[i].src="./img/big.png";

imgs[i].parentNode.className ="a-img";

}

</script>

</html>

<!-- 筆記?

a中的圖片的設置了固定尺寸,防止遮蓋?

A.1.給按鈕添加id-->

這是源碼,老師的教程里就兩張圖片big.png和small.png進行切換.實際開發中如果每張圖片的地址都不一樣那怎么辦？

是利用傳參嗎？具體怎么實現

12只怕有心人

2016-11-22

源自：信息排列效果

關注問題我要回答

1372

操作

收起

舉報

0/150

提交

取消

信息排列效果

參與學習 31757 人
解答問題 170 個

大咖教您節約網頁空間的方法，快速學會信息排列效果的制作

進入課程

每張圖片的地址都不一樣怎么破

我要回答關注問題

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

每張圖片的地址都不一樣怎么破

每張圖片的地址都不一樣怎么破