                        课程
                    
                        /前端开发
                        
                            /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

源自：信息排列效果

关注问题我要回答

1329

操作

收起

0/150

提交

取消

信息排列效果

参与学习 31772 人
解答问题 166 个

大咖教您节约网页空间的方法，快速学会信息排列效果的制作

进入课程

每张图片的地址都不一样怎么破

我要回答关注问题

热搜

最近搜索清空

每张图片的地址都不一样怎么破

每张图片的地址都不一样怎么破