|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8" />
|
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
|
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
|
|
<link rel="stylesheet" href="__TMPL__/public/assets/css/swiper-3.4.2.min.css" />
|
|
|
<link rel="stylesheet" href="__TMPL__/public/assets/css/base.css" />
|
|
|
<link rel="stylesheet" href="__TMPL__/public/assets/css/index.css" />
|
|
|
<title>星域画廊详情</title>
|
|
|
<style>
|
|
|
body,
|
|
|
html {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
.index_fourth .swiper-pagination-bullet-active {
|
|
|
background: #09FF8E;
|
|
|
}
|
|
|
|
|
|
.swiper-pagination-bullet {
|
|
|
background-color: white;
|
|
|
opacity: 1;
|
|
|
}
|
|
|
|
|
|
.index_shans {
|
|
|
-webkit-animation: bounce-down 1.8s linear infinite;
|
|
|
animation: bounce-down 1.8s linear infinite;
|
|
|
}
|
|
|
|
|
|
@keyframes bounce-down {
|
|
|
25% {
|
|
|
transform: translateY(-4px);
|
|
|
}
|
|
|
50%,
|
|
|
100% {
|
|
|
transform: translateY(0);
|
|
|
}
|
|
|
75% {
|
|
|
transform: translateY(4px);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div class="index_fourth swiper-container">
|
|
|
<ul class="swiper-wrapper">
|
|
|
<volist name="res['image_url']" id="vo">
|
|
|
<li class="swiper-slide">
|
|
|
<img src="{:cmf_get_image_url($vo.url)}" alt="" />
|
|
|
<div class="index_fourth_top index_shans">
|
|
|
<div class="index_fourth_top_img">
|
|
|
<img src="__TMPL__/public/assets/images/cicon_102@2x.png" alt="" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="index_fourth_bottom">
|
|
|
<div class="index_fourth_bottom_cantant">
|
|
|
{$res.post_title}
|
|
|
</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
</volist>
|
|
|
</ul>
|
|
|
<!--<div class="swiper-pagination"></div>-->
|
|
|
</div>
|
|
|
</body>
|
|
|
<script src="__TMPL__/public/assets/js/base.js"></script>
|
|
|
<script src="__TMPL__/public/assets/js/jquery-2.1.0.js"></script>
|
|
|
<script src="__TMPL__/public/assets/js/swiper.min.js"></script>
|
|
|
<script>
|
|
|
var swiper = new Swiper('.swiper-container', {
|
|
|
pagination: '.swiper-pagination',
|
|
|
paginationClickable: true,
|
|
|
direction: 'vertical',
|
|
|
onSlideChangeEnd: function(swiper) {
|
|
|
var snum = $('.index_fourth ul li').length;
|
|
|
console.log(swiper.activeIndex)
|
|
|
if (snum - 1 == swiper.activeIndex) {
|
|
|
$('.index_fourth_top').removeClass('index_shans');
|
|
|
} else {
|
|
|
$('.index_fourth_top').addClass('index_shans');
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</html> |
|
|
\ No newline at end of file |
...
|
...
|
|