实现轮播广告位和固定位置广告位

最近使用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前端调试窗口开启时的样子和效果）

好了，就是这样！

实现轮播广告位和固定位置广告位

轮播广告位：

用法

固定位置广告位：

猜你喜欢