<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
position: relative;
}
#smallImg img{
width: 200px;
height: 160px;
padding-right: 10px;
}
#bigImg img{
display: block;
width: 800px;
height: 600px;
padding-left: 240px;
}
#bigImg font{
padding-left: 620px;
}
</style>
</head>
<body>
<div id="smallImg">
</div>
<script type="text/javascript">
function showBigImag(){
// console.log('121')
var biNode = document.createElement('img')
biNode.src = this.src
biNode.id = this.id
var bigImgIdNode = document.createElement('font')
bigImgIdNode.innerText = biNode.id
var bigImg = document.getElementById('bigImg')
bigImg.innerHTML = null
bigImg.appendChild(biNode)
bigImg.appendChild(bigImgIdNode)
}
// imgArry = ['img/slide-1.jpg','img/slide-2.jpg','img/slide-3.jpg',
// 'img/slide-4.jpg','img/picture-1.jpg','img/picture-2.jpg']
imgArry = ['slide-1','slide-2','slide-3',
'slide-4','picture-1','picture-2']
var siNode = document.getElementById('smallImg')
for(x in imgArry){
var imgNode = document.createElement('img')
imgNode.src = 'img/'+imgArry[x]+'.jpg'
imgNode.id = imgArry[x]
siNode.insertBefore(imgNode,siNode.firstChild)
imgNode.onclick = showBigImag
}
</script>
<div id="bigImg">
</div>
</body>
</html>
(27)day6-图片切换
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- <?xml version="1.0" encoding="utf-8"?><RelativeLayout ...
- 1：Nivo SliderNivoslider：丰富的图片切换效果 官方网址：https://themeisle....
- <!DOCTYPE html> li{ /*width: 200px; height: 100px;*/ floa...
