|
...
|
...
|
@@ -18,8 +18,8 @@ |
|
|
|
<div class="show_9 clearfix">
|
|
|
|
<!-- 视频 -->
|
|
|
|
<div class="show_9_video">
|
|
|
|
<img class="video_poster iop" src="__TMPL__/public/assets/starImg/bicon_28.png" alt="">
|
|
|
|
<video id="video" width="100%" height="426" src="__TMPL__/public/assets/starImg/video.mp4"></video>
|
|
|
|
<img class="video_poster iop" src="" alt="">
|
|
|
|
<video id="video" width="100%" height="426" src=""></video>
|
|
|
|
<img class="play_button" onclick="bofang()" src="__TMPL__/public/assets/starImg/aicon_30.png" alt="">
|
|
|
|
</div>
|
|
|
|
<!-- 视频侧边选择 -->
|
|
...
|
...
|
@@ -28,7 +28,7 @@ |
|
|
|
<div class="show_9_video_asideTie clearfix">
|
|
|
|
<p>专辑</p>
|
|
|
|
<div class="select">
|
|
|
|
<input type="text" value="中国" readonly="readonly">
|
|
|
|
<input type="text" value="所有" readonly="readonly">
|
|
|
|
<img src="__TMPL__/public/assets/starImg/down.png" alt="">
|
|
|
|
<ul style="height:300px;overflow-y: scroll;width:145px;">
|
|
|
|
<li>所有</li>
|
|
...
|
...
|
@@ -43,11 +43,19 @@ |
|
|
|
<ul class="curren">
|
|
|
|
<volist name="res['data']" id="vo">
|
|
|
|
<li class="clearfix">
|
|
|
|
<img src="{:cmf_get_image_url($vo.thumbnail)}" alt="">
|
|
|
|
<img class="li_img" src="{:cmf_get_image_url($vo.thumbnail)}" alt="" style="opacity: 0.3;">
|
|
|
|
<p>
|
|
|
|
{$vo.post_title}
|
|
|
|
</p>
|
|
|
|
<input type="text" value="{:cmf_get_file_download_url($vo.video)}" class="li_video">
|
|
|
|
<input type="hidden" value="{:cmf_get_file_download_url($vo.video)}" class="li_video">
|
|
|
|
<!--标题-->
|
|
|
|
<input type="hidden" value="{$vo.post_title}" class="li_post_title">
|
|
|
|
<!--国家-->
|
|
|
|
<input type="hidden" value="{$vo.city_name}" class="li_city_name">
|
|
|
|
<!--取景-->
|
|
|
|
<input type="hidden" value="{$vo.framing}" class="li_framing">
|
|
|
|
<!--上映时间-->
|
|
|
|
<input type="hidden" value="{$vo.release_time}" class="li_release_time">
|
|
|
|
</li>
|
|
|
|
</volist>
|
|
|
|
</ul>
|
|
...
|
...
|
@@ -56,12 +64,12 @@ |
|
|
|
<!-- 底部 -->
|
|
|
|
<div class="show_9_video_asideTxt clearfix">
|
|
|
|
<!-- 标题 -->
|
|
|
|
<h1>令人神往的蒙大拿州弗里德黑德湖</h1>
|
|
|
|
<h1 class="post_title">令人神往的蒙大拿州弗里德黑德湖</h1>
|
|
|
|
<!-- 国家 -->
|
|
|
|
<div class="show_9_video_asideTxt2">
|
|
|
|
<p>国家：美国</p>
|
|
|
|
<p>取景：蒙大拿州弗里德黑德湖</p>
|
|
|
|
<p>上映时间：2019-11-12</p>
|
|
|
|
<p>国家：<span class="city_name">美国</span></p>
|
|
|
|
<p>取景：<span class="framing">蒙大拿州弗里德黑德湖</span></p>
|
|
|
|
<p>上映时间：<span class="release_time">2019-11-12</span></p>
|
|
|
|
</div>
|
|
|
|
<!-- 分享 -->
|
|
|
|
<div class="show_9_video_asideTxt3 clearfix">
|
|
...
|
...
|
@@ -77,24 +85,31 @@ |
|
|
|
<script>
|
|
|
|
// 星域秀场视频
|
|
|
|
$(function() {
|
|
|
|
$('.curren li').each(function() {
|
|
|
|
$(this).click(function() {
|
|
|
|
// 封面图
|
|
|
|
var img = $(this).find('img').attr('src');
|
|
|
|
$('.video_poster').attr('src', img);
|
|
|
|
// 视频
|
|
|
|
$('.video_poster').css('z-index', '10');
|
|
|
|
$('.play_button').show();
|
|
|
|
$('.play_button').css('z-index', '11');
|
|
|
|
var videoSrc = $(this).children('.li_video').val();
|
|
|
|
$('#video').attr('src', videoSrc);
|
|
|
|
//默认第一个视频
|
|
|
|
switch_video(0);
|
|
|
|
$('.curren').children('li').children('.li_img').css('opacity','0.3');
|
|
|
|
$('.curren').children('li').eq(0).children('.li_img').css('opacity','1');
|
|
|
|
|
|
|
|
// 视频标题
|
|
|
|
var videoTitle = $(this).children('p').text();
|
|
|
|
$('.show_9_video_asideTxt h1').text(videoTitle);
|
|
|
|
});
|
|
|
|
|
|
|
|
//点击切换
|
|
|
|
$('.curren li').click(function(){
|
|
|
|
var index = $(this).index();
|
|
|
|
$('.curren').children('li').children('.li_img').css('opacity','0.3');
|
|
|
|
$('.curren').children('li').children('p').css('color','rgba(153, 153, 153, 1)');
|
|
|
|
switch_video(index);
|
|
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
//鼠标滑过
|
|
|
|
$('.curren li').hover(function(){
|
|
|
|
$('.curren').children('li').children('.li_img').css('opacity','0.3');
|
|
|
|
$('.curren').children('li').children('p').css('color','rgba(153, 153, 153, 1)');
|
|
|
|
$(this).children('.li_img').css('opacity','1');
|
|
|
|
$(this).children('p').css('color','rgba(9, 255, 142, 1)');
|
|
|
|
});
|
|
|
|
|
|
|
|
// 点击input下拉
|
|
|
|
$('.select input').click(function() {
|
|
|
|
if ($(this).next('img').attr('src') == "__TMPL__/public/assets/starImg/down.png") {
|
|
|
|
$(this).next('img').attr('src', "__TMPL__/public/assets/starImg/up.png");
|
|
...
|
...
|
@@ -106,18 +121,10 @@ |
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
//下拉框选择城市
|
|
|
|
$('.select ul li').click(function() {
|
|
|
|
$('.select input').val($(this).text());
|
|
|
|
$('.select ul').hide();
|
|
|
|
var index = $(this).index();
|
|
|
|
$('.curren').eq(index).addClass('video_active').siblings().removeClass('video_active');
|
|
|
|
});
|
|
|
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
var val = $('.select input').val();
|
|
|
|
var val2 = $('.select ul li:first-child').text();
|
|
|
|
val = val2;
|
|
|
|
$('.select input').val(val);
|
|
|
|
console.log(index);
|
|
|
|
});
|
|
|
|
|
|
|
|
// 弹出框
|
|
...
|
...
|
@@ -127,10 +134,34 @@ |
|
|
|
|
|
|
|
$('.curren').eq(0).addClass('video_active');
|
|
|
|
});
|
|
|
|
|
|
|
|
//切换视频
|
|
|
|
function switch_video(index){
|
|
|
|
//视频路径
|
|
|
|
var li_index = $('.curren').children('li').eq(index);
|
|
|
|
//选中颜色
|
|
|
|
li_index.children('.li_img').css('opacity','1');
|
|
|
|
li_index.children('p').css('color','rgba(9, 255, 142, 1)');
|
|
|
|
|
|
|
|
var oneVideo = li_index.children('.li_video').val();
|
|
|
|
$('#video').attr('src',oneVideo);
|
|
|
|
// 视频封面图
|
|
|
|
var oneCover = li_index.children('.li_img').attr('src');
|
|
|
|
$('.video_poster').attr('src',oneCover);
|
|
|
|
//标题，国家，取景，上映时间
|
|
|
|
var post_title = li_index.children('.li_post_title').val();
|
|
|
|
var city_name = li_index.children('.li_city_name').val();
|
|
|
|
var framing = li_index.children('.li_framing').val();
|
|
|
|
var release_time = li_index.children('.li_release_time').val();
|
|
|
|
$('.post_title').text(post_title);
|
|
|
|
$('.city_name').text(city_name);
|
|
|
|
$('.framing').text(framing);
|
|
|
|
$('.release_time').text(release_time);
|
|
|
|
}
|
|
|
|
// 点击播放
|
|
|
|
function bofang() {
|
|
|
|
video.play();
|
|
|
|
$('#video').attr('controls', 'controls')
|
|
|
|
$('#video').attr('controls', 'controls');
|
|
|
|
$('.play_button').hide();
|
|
|
|
$('.video_poster').css('z-index', '-1');
|
|
|
|
}
|
...
|
...
|
|
