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

Posted 2020-11-07 幻景

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：

<ul class="left" id="left">
<li><img style="background: red;"/></li>
<li><img style="background: blue;"/></li>
<li><img style="background: yellow;"/></li>
<li><img style="background: forestgreen;"/></li>
<li><img style="background: fuchsia;"/></li>
<li><img style="background: green;"/></li>
</ul>
<section class="srction">
<ul class="right" id="right">
<li><img style="background: red;"/></li>
<li><img style="background: blue;"/></li>
<li><img style="background: yellow;"/></li>
<li><img style="background: forestgreen;"/></li>
<li><img style="background: fuchsia;"/></li>
<li><img style="background: green;"/></li>
</ul>
</section>

 

js：

<script type="text/javascript">
window.onload = function(){
var left = document.getElementById(‘left‘);
var left_li = left.getElementsByTagName(‘li‘);
var len = left_li.length;
var right = document.getElementById(‘right‘);
var right_li = right.getElementsByTagName(‘li‘);
var num = 0;

function wo(){
right.style.marginTop = ‘-‘ + num*626 + ‘px‘;
}

left_li.onclick = function(){
num++;
wo();
}
for(var i=0;i<len;i++){
left_li[i].index = i;
left_li[i].onclick = function(){
num = this.index;
wo()
}
}

}
</script>