html图片修改路径,改变图片路径.html

改变图片的路径

section{

width: 400px;

height:530px;

margin:100px auto;

background-color:brown;

padding:5px;

}

ul{

margin:0px;

padding:0px;

list-style: none;

}

li{

float:left;

width:128px;

height:128px;

background-color:green;

margin-left:5px;

margin-bottom: 5px;

border-radius:10px;

}

.first{

width:261px;

height:261px;

}

img{

width:100%;

border-radius:10px;

}

• 
• 
• 
• 
• 
• 
• 
• 
• 

var imgs = document.querySelectorAll('img');

var first = document.querySelector('.first img');

var arr = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg',

'img/8.jpg','img/9.jpg']

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

imgs[i].index = i;

imgs[i].onmouseover = function(){

first.src = arr[this.dataset.xxx];

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史