仿bilibili放映厅


  • 1月19日bilibili首播
  • 爸爸永远爱你
  • 《命运之夜——天之杯:恶兆之花》终极预告片来袭!
  • 现在我也没得选
  • 给电影的一封情书
代码
<style>
.ex-slide{border-radius: 4px;}
.ex-slide .focus-title span.title{position: absolute; bottom: 9px;left: 10px; line-height: 22px; height: 22px; font-size: 14px; color: #fff;z-index: 10; white-space: nowrap; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis;}
.focus-box{position: absolute; width: 100%; height: 62px; bottom: 0; left: 0; background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75))); background: -webkit-linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,.75)); background: -o-linear-gradient(top,rgba(0,0,0,0) 0,rgba(0,0,0,.75) 100%); background: linear-gradient(-180deg,rgba(0,0,0,0),rgba(0,0,0,.75));}
.focus-box ul{position: absolute; bottom: 9px; right: 8px;}
.focus-box ul li{margin-right:10px;width:64px; height:48px;float:left; text-align:center;position: relative;overflow: hidden;}
.focus-box ul li img{border-radius: 4px;border:2px solid #fff; cursor:pointer;}
.focus-box ul li.on img{border: 2px solid #f25d8e; -webkit-transition: left .3s ease; -o-transition: left .3s ease; transition: left .3s ease;}
	
.ex-slide{width: 1160px; height: 332px;}
.ex-slide ul.focus-bg li{width: 1160px; height: 332px;}
.ex-slide ul.focus-bg img, .ex-slide .focus-box img{width: 100%; height: 100%;}
</style>

<!--幻灯片-->
<div id="slide" class="ex-slide">
	<!--背景大图-->
	<ul class="focus-bg">
		<li>
			<a href="javascript:;" target="_blank">
				<img src="http://uscat.javaex.cn/FiDz-_fmZ5sOf7NcX_1P7SSMp5Lh"/>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="http://uscat.javaex.cn/FtXF1_IChh0R5gnV-iJJDq-7IliZ"/>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="http://uscat.javaex.cn/FnUnxb2XPdnt_Q1CoUXThysE9DOc"/>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="http://uscat.javaex.cn/Fj93BvY8ZqDr5i8kJW5rYHQcYBzF"/>
			</a>
		</li>
		<li>
			<a href="javascript:;" target="_blank">
				<img src="http://uscat.javaex.cn/Fi2mGN3zMYQiM1vxfndDo0UDAkAp"/>
			</a>
		</li>
	</ul>

	<!--标题,如果不需要,直接去掉这个div即可-->
	<div class="focus-title">
		<ul>
			<li><span class="title">1月19日bilibili首播</span></li>
			<li><span class="title">爸爸永远爱你</span></li>
			<li><span class="title">《命运之夜——天之杯:恶兆之花》终极预告片来袭!</span></li>
			<li><span class="title">现在我也没得选</span></li>
			<li><span class="title">给电影的一封情书</span></li>
		</ul>
	</div>
	
	<!--焦点,如果不需要焦点的话,直接去掉这个div即可-->
	<div class="focus-box">
		<ul>
			<li>
				<a href="javascript:;"><img src="http://uscat.javaex.cn/Fv5afCv9R0m8iT7GkQ1QyK8W9Aju" /></a>
			</li>
			<li>
				<a href="javascript:;"><img src="http://uscat.javaex.cn/Fhn1l1MTy3Ljio7ylmbpakONB-DG" /></a>
			</li>
			<li>
				<a href="javascript:;"><img src="http://uscat.javaex.cn/Fks00FHWefiaIl0DJMQ3hHH-69AP" /></a>
			</li>
			<li>
				<a href="javascript:;"><img src="http://uscat.javaex.cn/FhaD9dUkpKsJwQz0sTEGwlGPWM95" /></a>
			</li>
			<li>
				<a href="javascript:;"><img src="http://uscat.javaex.cn/FoIYv2e6psB3wUy0431_2DuZ8knH" /></a>
			</li>
		</ul>
	</div>
</div>

<script>
	javaex.slide({
		id : "slide",
		effect : "slice"
	});
</script>