用JavaScript设置图片切换

制作一个用 代码写出这样的效果图

鼠标移上去可以点击切换图片
下面是代码如下：`div {
width: 500px;
height: 300px;
text-align: center;
}

    div img {
        width: 450px;
        height: 240px;
    }

    ul li {
        float: left;
        width: 180px;
        height: 160px;
        border: 1px solid blue;
        margin-right: 15px;
    }

    ul,
    li {
        list-style: none;
    }

    ul li img {
        width: 180px;
        height: 160px;
    }``
    我们先设置一个div的代码样式
    然后在下面body里把要设置的图片引入
     <div>
    <img src="images/3.jpg" alt="" id="pic">
</div>
<ul id="list">
    <li><img src="images/3.jpg" alt=""></li>
    <li><img src="images/banner1.jpg" alt=""></li>
    <li><img src="images/banner2.jpg" alt=""></li>
    <li><img src="images/logo.png" alt=""></li>
</ul>
这是html的代码
然后再写js的代码

var lis=document.getElementById(‘list’).children;
var oImg=document.getElementById(‘pic’);
//遍历li，追加mouse事件
for(var i=0;i<lis.length;i++){
lis[i].οnmοuseοver=function (){
oImg.src=this.children[0].src;//修改图片路径
this.style.borderColor=‘green’;
this.style.cursor=‘pointer’;
};
lis[i].οnmοuseleave=function (){
this.style.borderColor=‘gray’;
};
}
这样可以得到一个可以切换的图片的浏览。