代碼文件，Vue代碼在文件裏，下載即可使用
鏈接: https://pan.baidu.com/s/1Ul2ImTYgiqJHgqqW9ptmww 提取碼: 1pmf
先附實現效果
引入文件
<link rel="stylesheet" type="text/css" href="css/swiper.css">
<link rel="stylesheet" type="text/css" href="css/viewer.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
css樣式
*{
padding:0px;
margin:0px;
}
.inner {
position: absolute;
left: 0;
top: 0;
right: -17px;
bottom: 0;
overflow-x: hidden;
overflow-y: scroll;
}
ul {
list-style: none;
}
.text-info {
font-weight: bolder;
color: #009688 !important;
}
.silder-box li {
float: left;
width: 160px;
height: 150px;
}
hr {
margin-bottom: 10px !important;
}
.tableread .table-title {
font-size: 13px;
font-weight: 700;
}
.nav-tabs {
border-bottom: 2px solid #105f80;
}
.page-tabs .active i {
color: #FFF;
}
.ibox-title-custom {
background-color: rgb(255, 255, 255);
-webkit-border-image: none;
color: inherit;
margin-bottom: 0px;
min-height: 15px;
border-color: rgb(231, 234, 236);
border-image: none;
/*border-style: solid solid none;*/
/*border-width: 4px 0px 0px;*/
padding: 10px 15px 7px;
min-height: 38px;
}
.ibox-content {
border-width: 4px 0px;
padding: 10px 0px 5px;
}
.customlabel {
color: #797979;
font-weight: 500;
}
.customrow {
border-color: rgb(231, 234, 236);
border-image: none;
border-style: solid none none;
border-top-width: 1px;
text-shadow: 0 0 black;
padding-top: 9px;
}
.row {
margin: 0;
}
.float-e-margins1{
background-color: blue;
/*opacity: 0.2;*/
/*position:relative;*/
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
color: #555 !important;
background-color: #105f80
}
.float-e-margins2{
width:90%;
height:100%;
position:absolute;
z-index:999;
background: #FFF;
opacity:0.7;
}
.float-e-margins2 p{
text-align:center;
font-weight: 600;
line-height: 24px;
font-size: 20px;
width: 20px;
margin: 0 auto;
text-align: center;
position: absolute;
top:30%;
left:48%;
}
.pc-slide {
width: 100%;
margin: 0 auto;
}
.view .swiper-container {
width:100%;
height:160px;
}
.view .swiper-container img{
/*width:100%;*/
width:230px;
height:160px;
}
.view .arrow-left{
background: url(img/index_tab_l.png) no-repeat left top;
position: absolute;
left: 10px;
top: 50%;
margin-top: -25px;
width: 28px;
height: 51px;
display:none;
}
.view .arrow-right {
background: url(img/index_tab_r.png) no-repeat left bottom;
position: absolute;
right: 10px;
top: 50%;
margin-top: -25px;
width: 28px;
height: 51px;
display:none;
}
.view:hover .arrow-left,.view:hover .arrow-right{
display:block;
z-index: 10;
}
.preview {
/*width: 100%;*/
/*margin-top: 10px;*/
height:160px;
position: relative;
overflow:hidden;
}
.preview .swiper-container {
/*height: 62px;*/
/*margin-left: 35px;*/
overflow: hidden;
}
.preview .swiper-slide {
width: 57px;
height: 52px;
}
.preview .slide6 {
width: 52px;
}
.preview .arrow-left {
background: url(img/feel3.png) no-repeat left top;
position: absolute;
top: 5px;
left: 50%;
margin-left: -15px;
width: 9px;
height: 18px;
display:none;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg);
}
.preview .arrow-right {
background: url(img/feel4.png) no-repeat left bottom;
position: absolute;
bottom: 5px;
left: 50%;
margin-left: -15px;
width: 9px;
height: 18px;
display:none;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-moz-transform:rotate(90deg); /* Firefox */
-webkit-transform:rotate(90deg); /* Safari 和 Chrome */
-o-transform:rotate(90deg);
}
.preview:hover .arrow-left,.preview:hover .arrow-right{
display:block;
z-index: 10;
}
.preview img {
padding: 1px;
width:50px;
height:50px;
}
.preview .active-nav img {
padding: 0;
border: 1px solid #F00;
}
.noshow{
display: none;
}
dom內容
<div class="content">
<div class="ibox float-e-margins">
<div class="ibox-title-custom">
<h3 style="margin: 0;display: inline-block; padding: 0;text-overflow: ellipsis;float: left;" class="customlabel">取證圖片</h3>
<div class="ibox-tools">
<a class="dropdown-toggle" data-toggle="collapse" href="#en_content"
aria-expanded="true" id="collapse_img">
<i class="fa fa-expand"></i>
</a>
</div>
</div>
<div class="collapse in" style="" id="en_content">
<div class="row">
<div class="col-sm-12">
<div class="pc-slide col-sm-12" >
<div class="view col-sm-10">
<div class="swiper-container">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-wrapper" style="text-align: center" id="swiperWrapper">
</div>
</div>
</div>
<div class="preview col-sm-2">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-container">
<div class="swiper-wrapper" id="swiperWrapper1" style="height:100%;flex-direction: column;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
JS代碼
var ajaxData={Rows:[
{img_name: "https://img.alicdn.com/tfs/TB1wlmPqKL2gK0jSZFmXXc7iXXa-520-280.jpg_q90_.webp",
imgpath: "https://img.alicdn.com/tfs/TB1wlmPqKL2gK0jSZFmXXc7iXXa-520-280.jpg_q90_.webp",
pageIndex: 0,
pageSize: 0,
thumbimgpath: "https://img.alicdn.com/tfs/TB1wlmPqKL2gK0jSZFmXXc7iXXa-520-280.jpg_q90_.webp",
totalCount: 0,
totalPages: 0},
{img_name: "https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg",
imgpath: "https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg",
pageIndex: 0,
pageSize: 0,
thumbimgpath: "https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg",
totalCount: 0,
totalPages: 0},
{img_name: "https://img.alicdn.com/bao/uploaded/i1/132110009/TB2hKq3jVXXXXblXpXXXXXXXXXX_!!132110009.jpg_180x180q90.jpg_.webp",
imgpath: "https://img.alicdn.com/bao/uploaded/i1/132110009/TB2hKq3jVXXXXblXpXXXXXXXXXX_!!132110009.jpg_180x180q90.jpg_.webp",
pageIndex: 0,
pageSize: 0,
thumbimgpath: "https://img.alicdn.com/bao/uploaded/i1/132110009/TB2hKq3jVXXXXblXpXXXXXXXXXX_!!132110009.jpg_180x180q90.jpg_.webp",
totalCount: 0,
totalPages: 0},
{img_name: "https://aecpm.alicdn.com/simba/img/TB17IgbKpXXXXcvXXXXSutbFXXX.jpg",
imgpath: "https://aecpm.alicdn.com/simba/img/TB17IgbKpXXXXcvXXXXSutbFXXX.jpg",
pageIndex: 0,
pageSize: 0,
thumbimgpath: "https://aecpm.alicdn.com/simba/img/TB17IgbKpXXXXcvXXXXSutbFXXX.jpg",
totalCount: 0,
totalPages: 0},
{img_name: "https://gw.alicdn.com/tfs/TB1hJ2KX6ihSKJjy0FlXXadEXXa-254-318.png",
imgpath: "https://gw.alicdn.com/tfs/TB1hJ2KX6ihSKJjy0FlXXadEXXa-254-318.png",
pageIndex: 0,
pageSize: 0,
thumbimgpath: "https://gw.alicdn.com/tfs/TB1hJ2KX6ihSKJjy0FlXXadEXXa-254-318.png",
totalCount: 0,
totalPages: 0},
{img_name: "https://img.alicdn.com/imgextra/i1/71/TB2ABoCfBcHL1JjSZJiXXcKcpXa_!!71-2-luban.png_120x120q90.jpg_.webp",
imgpath: "https://img.alicdn.com/imgextra/i1/71/TB2ABoCfBcHL1JjSZJiXXcKcpXa_!!71-2-luban.png_120x120q90.jpg_.webp",
pageIndex: 0,
pageSize: 0,
thumbimgpath: "https://img.alicdn.com/imgextra/i1/71/TB2ABoCfBcHL1JjSZJiXXcKcpXa_!!71-2-luban.png_120x120q90.jpg_.webp",
totalCount: 0,
totalPages: 0}
], Total: 6};
function init(){
$('.content .panel').eq(0).siblings().addClass("hidediv");
$('.content1 .panel1').eq(0).siblings().addClass("hidediv");
initimg()
$('#collapse_img').click(function () {
if ($(this).attr("aria-expanded") == "false") {
$(this).find("i").toggleClass('fa-compress').toggleClass('fa-expand');
}
else {
$(this).find("i").toggleClass('fa-expand').toggleClass('fa-compress');
}
});
}
init();
$('.newtab ul li').click(function(event) {
$(this).addClass('tab');
$(this).siblings().removeClass('tab');
$('.content .panel').eq($(this).index()).addClass('div_show').removeClass('hidediv');
$('.content .panel').eq($(this).index()).siblings().removeClass('div_show').addClass("hidediv");
})
$('.newtab1 ul li').click(function(event) {
$(this).addClass('tab1');
$(this).siblings().removeClass('tab1');
$('.content1 .panel1').eq($(this).index()).addClass('div_show').removeClass('hidediv');
$('.content1 .panel1').eq($(this).index()).siblings().removeClass('div_show').addClass("hidediv");
})
var viewSwiper = new Swiper('.view .swiper-container', {
onSlideChangeStart: function() {
updateNavPosition();
}
})
$('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
e.preventDefault();
if(viewSwiper.activeIndex == 0) {
viewSwiper.swipeTo(viewSwiper.slides.length - 1, 1000);
return;
}
viewSwiper.swipePrev();
})
$('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
e.preventDefault();
if(viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
viewSwiper.swipeTo(0, 1000);
return
}
viewSwiper.swipeNext();
})
var previewSwiper = new Swiper('.preview .swiper-container', {
visibilityFullFit: true,
slidesPerView: 'auto',
onlyExternal: true,
onSlideClick: function() {
viewSwiper.swipeTo(previewSwiper.clickedSlideIndex);
}
})
function updateNavPosition() {
$('.preview .active-nav').removeClass('active-nav');
var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav');
$("#swiperWrapper1").find(".noshow").removeClass("noshow");
if(!activeNav.hasClass('swiper-slide-visible')) {
if(activeNav.index() > previewSwiper.activeIndex) {
var thumbsPerNav = Math.floor(previewSwiper.height / activeNav.height()) - 1;
previewSwiper.swipeTo(activeNav.index()-thumbsPerNav);
} else {
previewSwiper.swipeTo(activeNav.index());
}
if(activeNav.index() >= 2){
for(var i=0;i<activeNav.index()-2;i++){
$("#swiperWrapper1").find("#img"+i).parent().addClass('noshow');
}
}
}
}
function initimg(){
var DOMObj = null, //img
obj = null, //保存當前對象
img_path = '', //圖片名
price = '', //霸屏每秒的價錢
paScreenType = '', //霸屏的type
name = '', //霸屏圖片的名字
src = ''; //圖片路徑
$('#swiperWrapper').empty();
var newData=ajaxData.Rows;
if (ajaxData.Total > 0) {
$.each(newData, function (i, item) {
var imgList = '<div class="swiper-slide">' +'<img id="img'+i+'" src="'+item.thumbimgpath+'" name="'+item.img_name+'" data-original="'+item.imgpath+'" >'+'</div>';
$('#swiperWrapper').append(imgList);
$('#swiperWrapper1').append(imgList);
})
}
$('#swiperWrapper').viewer({
url: 'data-original',
});
}
