站长资源代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery图片展示及切换-wangdahai.cn</title>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<style>
* {
margin:0;
padding:0;
list-style:none;
}
.imgbox {
width:640px;
height:220px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.imgbox li {
width:150px;
height:100px;
margin:10px 0px 0px 10px;
float:left;
}
.imgbox li img {
width:100%;
height:100%;
display:block;
}
.showimg {
width:600px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
margin:auto;
bottom:0;
background:#fff;
box-shadow:0px 0px 0px 1000px rgba(0,0,0,0.7);
z-index:10;
transform:scale(0,0);
transition:transform 1s;
}
.showimg img {
width:100%;
height:100%;
}
.btnL,.btnR {
width:100px;
height:200px;
position:absolute;
top:0;
bottom:0;
margin:auto;
}
.btnL {
background:url(http://www.jq22.com/demo/jqueryWflbt201803192258/images/left2.png);
background-size:100px 200px;
left:0;
}
.btnR {
background:url(http://www.jq22.com/demo/jqueryWflbt201803192258/images/right2.png);
background-size:100px 200px;
right:0;
}
.close {
width:50px;
height:50px;
background:url(http://www.jq22.com/tp/45f352e9-fc7f-44ed-9990-2a100a0c422b.png);
background-size:50px 50px;
border-radius:50%;
position:absolute;
right:-25px;
top:-25px;
}
body .active {
transform:scale(1,1);
}
</style>
</head>
<body>
<ul class="imgbox">
<li><img src="http://www.jq22.com/img/cs/500x300-1.png" alt=""></li>
<li><img src="http://www.jq22.com/img/cs/500x300-2.png" alt=""></li>
<li><img src="http://www.jq22.com/img/cs/500x300-3.png" alt=""></li>
<li><img src="http://www.jq22.com/img/cs/500x300-4.png" alt=""></li>
<li><img src="http://www.jq22.com/img/cs/500x300-5.png" alt=""></li>
<li><img src="http://www.jq22.com/img/cs/500x300-6.png" alt=""></li>
<li><img src="http://www.jq22.com/img/cs/500x300-7.png" alt=""></li>
<li><img src="http://www.jq22.com/img/cs/500x300-8.png" alt=""></li>
</ul>
<div class="showimg">
<img src="" alt="">
<div class="btnL"></div>
<div class="btnR"></div>
<div class="close"></div>
</div>
<script>
var imgbox = $('.imgbox');
var lise = $('li', imgbox);
var show = $('.showimg');
var leftbtn = $('.btnL');
var rightbtn = $('.btnR');
var close = $('.close');
var num = 0;
$(document).ready(function() {
var num = $(this).index();
lise.on('click', function() {
var src = $('img', this).prop('src');
$('img', show).prop('src', src);
show.addClass('active');
})
close.click(function() {
show.removeClass('active');
})
rightbtn.click(function() {
num++;
if (num >= lise.length) {
num = 0;
}
var url = lise.eq(num).find('img').prop('src');
$('img', show).prop('src', url);
})
leftbtn.click(function() {
num--;
if (num <= 0) {
num = lise.length;
}
var url = lise.eq(num).find('img').prop('src');
$('img', show).prop('src', url);
})
})
</script>
</body>
</html>
评论前必须登录！
注册