滚动广告pptBox_JS + CSS 图片切换效果

本文链接：https://blog.csdn.net/u013663591/article/details/19202195

本文介绍了如何利用pptBox JavaScript库和CSS实现动态的滚动广告图片切换效果，详细讲解了前端调用方法和关键代码实现。

摘要由CSDN通过智能技术生成

前端调用:

<div id="xxx">
     <script>
     var box =new PPTBox();
     box.width = 998; //宽度
     box.height = 323;//高度
     box.autoplayer = 3;//自动播放间隔时间

     //box.add({"url":"图片地址","title":"悬浮标题","href":"链接地址"})
     box.add({"url":"images/home_27.jpg","href":"#","title":"悬浮提示标题1"})
     box.add({"url":"images/home_27.jpg","href":"#","title":"悬浮提示标题2"})
     box.add({"url":"images/home_27.jpg","href":"#","title":"悬浮提示标题3"})
     box.add({"url":"images/home_27.jpg","href":"#","title":"悬浮提示标题4"})
     box.show();
    </script>
</div>

CSS样式:

<script type="text/javascript" src="js/pptBox.js"></script>
<style>
/* 焦点图 */
.mainbox{
    overflow:hidden;
    position:relative;
}
.flashbox{
   overflow:hidden;
    position:relative;
}
.imagebox{
    text-align:center;position:relative;z-index:999;
}

.bitdiv{display:inline-block;width:18px;height:18px;margin:0 10px 10px 0px;cursor:pointer;}
.defimg{background-image:url(images/02.png)}
.curimg{background-image:url(images/01.png)}
</style>

js/pptBox.js

pptBox.js 文件:

   /**
    * 地球家园 2010-02-14
    */
    function PPTBox()
    {
        this.uid = PPTBoxHelper.getId();
        PPTBoxHelper.instance[this.uid] = this;