首页 > 其他 > 详细

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

时间:2018-05-22 20:03:31      阅读:281      评论:0      收藏:0      [点我收藏+]

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>

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

原文:https://www.cnblogs.com/zjhuanjing/p/9073699.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!