结合swiper重制图集内容页

3D轮播图片效果，可结合swiper实现

这里需要获取到二组信息，一组是图片集和链接信息结合swiper实现轮播图片效果，一组是上下篇图集信息用于下方跳转。

<script type="text/javascript">
    //图片集数据
    var slide_data = eval(@(new PhotoService().GetSlideDataHtml(Model, "/Content/_Common/Base/img/nopic.gif")));

    var prevAlbum = slide_data.prev_album;
    var nextAlbum = slide_data.next_album;
    var nextData = "<div class='nextAlbum'><a target='_blank' title='" + nextAlbum.title + "' href='" + nextAlbum.url +"'><img src='" + nextAlbum.img_url + "' alt='"+ nextAlbum.title + "'/>上一组：" + nextAlbum.title + "</a></div>"; 
    var prevData = "<div class='prevAlbum'><a target='_blank' title='" + prevAlbum.title + "' href='" + prevAlbum.url +"'><img src='" + prevAlbum.img_url + "' alt='"+ prevAlbum.title + "'/>下一组：" + prevAlbum.title + "</a></div>"; 
    $(".swp-album").append(nextData + prevData);


    var ulData = "";
    var sulData = "";
    var obj = eval(slide_data.images);
    $.each(obj, function (n, value) {
        var lis = "";
        var slis = "";
        lis += "<div class='swiper-slide'><a target='_blank' href='" + value.download_img +"'><img src='" + value.download_img + "' alt='" + value.title + "'/></a></div>";
        slis += "<div class='swiper-slide'><img src='" + value.download_img + "' alt='" + value.title + "'/></div>";
        ulData += lis;
        sulData += slis;
    });
    $("#SI_Cont .swiper-wrapper").append(ulData);
    $("#SI_SmallList .swiper-wrapper").append(sulData);
</script>

利用javascript eval函数后，可以直接采用 "."句号标识法直接获取其属性值。具体属性值需查看那段json格式的数据集。

包括了  slide：为图集基本信息的数据集，images：为图集中包括所有图片信息，next_albm：为下一组图集信息，prev_albm：为上一组图集信息
其中images可继续拆分获取其图片集合中所有图片的信息

最后结合swiper插件相应的coverflow特效实现。

<script src="@Url.AppendVersion($"~/Content/{CurrentSite.Instance.Identifier}/Base/js/swiper.min.js")"></script>

<script type="text/javascript">
var thumbsSwiper = new Swiper('#SI_SmallList', {
	spaceBetween: 10, //在slide之间设置距离(单位px)
	slidesPerView: 8, //设置缩略图显示数量
})
var gallerySwiper = new Swiper('#SI_Cont', {
	effect : 'coverflow',
	spaceBetween: 1, //缩略图间距
	slidesPerView: 3, //设置轮播图显示数量
	centeredSlides: true, //active slide会居中,而不是默认状态下的居左。
	initialSlide :1, //初始索引
    preventClicks: true, //防止触摸时触发链接跳转
	loop: true, //在轮换到最后一张图时，看起来是循环的
	autoplay: false, //是否自动播放
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    thumbs: {
		swiper: thumbsSwiper,  //绑定的缩略图
	}
})
</script>