图片左边点击，右边大图展示

css样式：
*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
img{
width: 100%;
height: 100%;
display: block;
}
.left{
width: 30%;
float: left;
background: #ccc;
}
.left > li{
width: calc(100% - 6px);
height: 230px;
float: left;
border: 3px solid #000;
margin: 0 auto 20px;
}
.right{
width: 100%;
margin-top: 0;
}
.right > li{
width: calc(100% - 6px);
height: 600px;
border:3px solid #000;
margin: 0 auto 20px;
}
.srction{
width: 70%;
height: 606px;
float: left;
background: #bbb;
margin-top: 0;
position: fixed;
right: 0;
top: 0;
overflow: hidden;
}

 

html：

 

js：

转载于:https://www.cnblogs.com/zjhuanjing/p/9073699.html