实现图片放大并且点击打开后可以单独查看。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery.min.js"></script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
.wrap{
1200px;
height:244px;
margin:0 auto;
position:relative;
/*可以先对div进行设置边框便于查看等确定了再去掉*/
}
.tt{
200px;
height:200px;
float:left;
margin:20px;
}
img{
200px;
height:210px;
}
.tt:hover img{
margin-left:10px;
transform:scale(1.2);
transition:all 0.3 ease;
}
.bg,.diag{
display:none;
}
.bg{
100%;
height:100%;
top:0;
left:0;
background:#000000;
opacity:0.6;
z-index:10;
position:absolute;
}
.diag{
500px;
height:500px;
top:20%;
left:35%;
border:3px solid black ;
border-radius:10px;
position:absolute;
}
.diag .imgshow{
500px;
height:500px;
top:0;
left:0;
position:absolute;
z-index:44434;
overflow:hidden;
border-radius:10px;
}
.diag .close{
40px;
height:40px;
right:0px;
top:0px;
z-index:2222;
position:absolute;
background:url(img/5.png);
border-radius:4px;
opacity:0.7;
z-index:44434;
}
.diag .close img{
40px;
height:40px;
right:0px;
top:0px;
z-index:2222;
position:absolute;
border-radius:4px;
opacity:0.7;
z-index:44434;
}
.imgshow img{
500px;
height:500px;
}
.left{
0;
border-left:50px solid transparent;
border-right:50px solid plum;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
position:absolute;
left:-26px;
top:36%;
z-index:44434;
}
.right{
0;
border-left:50px solid plum;
border-right:50px solid transparent;
border-top:50px solid transparent;
border-bottom:50px solid transparent;
position:absolute;
right:-26px;
top:36%;
z-index:44434;
}
.left:hover{
0;
border-left:60px solid transparent;
border-right:60px solid purple;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
position:absolute;
left:-26px;
top:36%;
z-index:44434;
transition:all 0.5s;
}
.right:hover{
0;
border-left:60px solid purple;
border-right:60px solid transparent;
border-top:60px solid transparent;
border-bottom:60px solid transparent;
position:absolute;
right:-26px;
top:36%;
z-index:44434;
transition:all 0.5s;
}
</style>
</head>
<body>
<ul class='wrap'>
<li class='tt'>
<img src="img/-16391cef74eebca1.jpg">
</li>
<li class='tt'>
<img src="img/-40397577b010bee1.jpg">
</li>
<li class='tt'>
<img src="img/-6588dfd710c1bbeb.jpg">
</li>
<li class='tt'>
<img src="img/-79351a283e2c5dd8.jpg">
</li>
<li class='tt'>
<img src="img/1488588954889.jpeg">
</li>
<li class='tt'>
<img src="img/1488588981873.jpeg">
</li>
<li class='tt'>
<img src="img/1488589042954.jpeg">
</li>
<li class='tt'>
<img src="img/1488589064760.jpeg">
</li>
<li class='tt'>
<img src="img/1488589085021.jpeg">
</li>
<li class='tt'>
<img src="img/1488589143052.jpeg">
</li>
</ul>
<div class='bg'></div>
<div class='diag'>
<div class='imgshow'>
<img src="img/-16391cef74eebca1.jpg">
</div>
<div class='close'>
<img src="img/5.png"/>
</div>
<div class='left'></div>
<div class='right'></div>
</div>
<script>
$(function(){
var index=0;
var total=0;
var total=$('li').length;
$('.wrap img').on('click',function(){
$('.bg').show();
$('.imgshow img').attr('src',$(this).attr('src'));
$('.diag').show();
index=$(this).parent().index();
});
$('.diag .close').on('click',function(){
$('.bg').hide();
$('.diag').hide();
});
$('.left').on('click',function(){
if(index>1){
index=index-1;
}else{
index=total-1;
}
console.log(index);
console.log($('li').eq(index).find('img').attr('src'));
$(this).parent().find('img').attr('src',$('li').eq(index).find('img').attr('src'));
});
$('.right').on('click',function(){
if(index<total-1){
index=index+1;
}else{
index=0;
}
console.log(index);
console.log($('li').eq(index).find('img').attr('src'));
$(this).parent().find('img').attr('src',$('li').eq(index).find('img').attr('src'));
});
});
</script>
</body>
</html>