实现轮播广告位和固定位置广告位
最近使用bootstrap做了个轮播广告位的展示和在窗口固定位置广告位的实现,下面来总结一下!
轮播广告位:
去bootstrap的官网,我们可以看到有提供实现轮播的插件,我也是用的这个插件,Bootstrap 轮播(Carousel)插件
地址: http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html
项目环境介绍,后台Jfinal框架,前台freemarker模板+bootstrap+js
后台在这里概述一下,我的广告位是由后台系统控制的,包括需要展示几个广告位,在广告位上展示什么的图片等等
前台页面的实现:
遍历从后台获取到的广告位信息的集合,放到轮播插件里:
<#--轮播广告-->
<#--<img src="../static/img/banner.jpg" width="100%">-->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- 轮播(Carousel)指标 -->
<#if bannerList??>
<ol class="carousel-indicators">
<#list bannerList as list>
<li data-target="#myCarousel"
data-slide-to="${list.id-1}"></li>
</#list >
</ol>
<#--轮播项目-->
<div class="carousel-inner">
<#list bannerList as list>
<#--让广告位id是1的轮播查询项目展示出来-->
<div class="item <#if list.imageUrl??>${(list.id==1) ? string('active','')}</#if>">
<a href=${list.link!}>${list.imageUrl!}</a>
</div>
</#list>
</div>
<#--轮播导航-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</#if>
</div>
</div>
另外,由于bootstrap自带的轮播效果图,左右两侧有灰色的暗影,我感觉很是别扭,在css中做了样式的调整,但是感觉还不够完美,如果哪位大牛有更优美、更实用的样式,请在评论区留言告诉我,谢谢!
css代码:
.carousel-control.left {
background-image: none;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
left: auto;
right: 0;
background-image: none;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
用法
-
通过 data 属性:使用 data 属性可以很容易控制轮播(Carousel)的位置。
- 属性 data-slide 接受关键字 prev 或 next,用来改变幻灯片相对于当前位置的位置。
- 使用 data-slide-to 来向轮播传递一个原始滑动索引,data-slide-to="2" 将把滑块移动到一个特定的索引,索引从 0 开始计数。
- data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
- 效果参考:http://www.runoob.com/try/try.php?filename=bootstrap3-plugin-carousal-simple
固定位置广告位:
固定位置广告位的实现,我的思路主要是借助了一个div,这样解决起来就相当容易了,就是展示的样式需要自己根据自己的项目需要好好调整一下了。
代码如下:
<div id="ad">
<#--想要被展示的图片-->
<img src="../static/img/ad.png" alt="" width="100%">
<#--关闭广告的按钮-->
<span>X</span>
</div>
<script>
<#--slideUp向下收起动画,和绑定的时间-->
$(function () {
$("span").click(function () {
$("#ad").slideUp(2000);
})
$("#ad").slideDown(2000);
})
<#--如果网络图片加载失败,展示的默认图片-->
$("img").error(function () {
$(this).attr('src', "../static/img/load.jpg");
})
</script>
css样式,需要根据自己的情况进行调整
#ad {
right: 12%;
position: fixed;
bottom: 0;
display: none;
opacity: 0.95;
}
#ad > span {
font-size: larger;
display: inline-block;
width: 40px;
height: 40px;
position: absolute;
right: 5%;
bottom: 15%;
cursor: pointer;
}
具体效果参考:(就像F12前端调试窗口开启时的样子和效果)
好了,就是这样!