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

     最近使用bootstrap做了个轮播广告位的展示和在窗口固定位置广告位的实现，下面来总结一下！

     轮播广告位：

    去bootstrap的官网，我们可以看到有提供实现轮播的插件，我也是用的这个插件，Bootstrap 轮播（Carousel）插件

    地址： http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html

    项目环境介绍，后台Jfinal框架，前台freemarker模板+bootstrap+js

    后台在这里概述一下，我的广告位是由后台系统控制的，包括需要展示几个广告位，在广告位上展示什么的图片等等

    前台页面的实现：

   遍历从后台获取到的广告位信息的集合，放到轮播插件里：

<#--轮播广告-->
    <#---->
        

            
        <#if bannerList??>

            

                <#list bannerList as list>
                    

                
            
            <#--轮播项目-->
            

                <#list bannerList as list>
                <#--让广告位id是1的轮播查询项目展示出来-->
                    

                        ${list.imageUrl!}
                    
                
            
            <#--轮播导航-->
            
                
                Previous
            
            
                
                Next
            
        

        
    

 另外，由于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，这样解决起来就相当容易了，就是展示的样式需要自己根据自己的项目需要好好调整一下了。

代码如下：

      <#--想要被展示的图片-->
    
     <#--关闭广告的按钮-->
    X

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

好了，就是这样！