效果:
http://d1.1920m.com/
做法:
HTML:
<!-- 輪播廣告 -->
<div class="layout">
<div class="line">
<div class="xl12 xs12 xm12 bm12">
<div class="slides owl-carousel dot-center slides-arrow">
{eyou:adv pid='1'}
<div class="item media-img">
<div class="{eyou:notempty name='$field.intro' /}zoom-banner-pc{eyou:else /}zoom-banner-m{/eyou:notempty}" style="background-image:url({$field.litpic})">
{eyou:notempty name='$field.intro' /}
<div class="container">
<div class="line">
<div class="xl12 xs12 xm12 xb12 text-center">
<div class="padding-pc">
<h2 class="text-white">{$field.title}</h2>
<p class="text-white hidden-l opacity-big text-big">{$field.intro}</p>
<div class="blank-middle"></div>
<a href="{$field.links}" {$field.target} class="button button-big border-none radius-middle text-blue text-default text-center bg-white">了解詳情</a>
</div>
</div>
</div>
</div>
{eyou:else /}
<a href="{$field.links}" {$field.target}><div class="post-link"></div></a>
{/eyou:notempty}
</div>
</div>
{/eyou:adv}
</div>
</div>
</div>
</div>
<!-- 輪播廣告 -->
CSS:
/* 首頁輪播 */
.slides .media-img{position:relative;overflow:hidden}
.slides .media-img .post-link{background:rgba(0,0,0,0);width:100%;height:100%;position:absolute;bottom:0;top:0;left:0;right:0;transition:.5s}
.slides .media-img .zoom-banner-m{transition:.5s;padding-bottom:21%;display:block;width:100%;height:0;overflow:hidden;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;position:relative}
.slides .media-img .zoom-banner-pc{transition:.5s;padding-bottom:30%;display:block;width:100%;height:0;overflow:hidden;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;position:relative}
.slides .media-img .padding-pc{padding:150px 20px 0 20px}
.slides .media-img h2{font-size:42px;margin-bottom:30px;font-weight:700;text-shadow:1px 1px 5px rgba(57,48,216,.6);letter-spacing:2px}
.slides .media-img h3{font-size:36px;margin-bottom:25px;font-weight:700;text-shadow:1px 1px 5px rgba(57,48,216,.6);letter-spacing:2px}
.slides .media-img a.button{padding:12px 50px}
.slides-arrow:hover .owl-nav .owl-next,.slides-arrow:hover .owl-nav .owl-prev{opacity:.3}
.slides-arrow.dot-center .owl-dots{position:relative;top:-30px;padding:0;text-align:center;vertical-align:middle;display:inline-block;width:100%}
/* 首頁輪播 */
重點:廣告?zhèn)渥㈦S便填點東西
更好的eyou標簽整理:https://www.tbadc.com/coding/lists_158.html