广告位招租

织梦网站怎么制作banner轮播图

我们在使用织梦做网站时,制作banner轮播图也是非常简单,下面学做网站论坛介绍一下织梦制作banner轮播图的通用方法。

织梦网站怎么制作banner

方法如下:

  1. 下载导航下拉菜单jquery特效基础包。
  2. 将下载的压缩包解压出来,将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的js文件夹里;
织梦网站怎么制作banner
  1. 在头部模板head.htm里找到</head> 标签,将下的代码放到</head> 标签上面;(注意文件路径)<script type=”text/javascript” src=”{dede:global.cfg_templets_skin/}/static/js/jquery1.42.min.js”></script>
    <script type=”text/javascript” src=”{dede:global.cfg_templets_skin/}/static/js/jquery.SuperSlide.2.1.3.js”></script>
  2. 使用以下的代码替换原来的网站轮播图代码。(一般在head.htm)<div id=”slideBox” class=”slideBox”>
                <div class=”hd”>
                    <ul><li>1</li><li>2</li><li>3</li><li>4</li></ul>
                </div>
                <div class=”bd”>
                    <ul>
                    {dede:arclist row=’3′ typeid=’轮播图栏目ID’}
                        <li><a href=”[field:arcurl/]” target=”_blank”><img src=”[field:picname/]” /></a></li>
                    {/dede:arclist}
                    </ul>
                </div>

                <!– 下面是前/后按钮代码,如果不需要删除即可 –>
                <a class=”prev” href=”javascript:void(0)”></a>
                <a class=”next” href=”javascript:void(0)”></a>

            </div>

            <script type=”text/javascript”>
            jQuery(“.slideBox”).slide({mainCell:”.bd ul”,autoPlay:true});
            </script>
  3. 在CSS文件里添加以下控制轮播图的CSS样式代码。/* 本例子css */
            .slideBox{ width:100%; height:100%; overflow:hidden; position:relative; border:1px solid #ddd;  }
            .slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
            .slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
            .slideBox .hd ul li{ float:left; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
            .slideBox .hd ul li.on{ background:#f00; color:#fff; }
            .slideBox .bd{ position:relative; height:100%; z-index:0;   }
            .slideBox .bd li{ zoom:1; vertical-align:middle; }
            .slideBox .bd img{ width:100%; height:100%; display:block;  }

            /* 下面是前/后按钮代码,如果不需要删除即可 */
            .slideBox .prev,
            .slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
            .slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
            .slideBox .prev:hover,
            .slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
            .slideBox .prevStop{ display:none;  }
            .slideBox .nextStop{ display:none;  }

在后台创建一个“轮播图”的栏目,把它设置为“隐藏”,然后发几篇文章,上传封面图即可。

织梦网站怎么制作banner

好了,这样就制作好了织梦网站banner轮播图。

0
分享到:

 1. 本站实行充值兑换金币,1元=1金币,每日签到可领取1个金币,[我要充值]
 2. 标注免费的资源,登录后即可下载,加入我们VIP会员全站无限下载,[去开通]
 3. 本站正式上线, 推荐到QQ或者微信群免费获得VIP会员资格,详情[点我查看]
 4. 如果您找不到合适的资源,请联系我们,告知您的需求,我们会尽快整理发布。

没有账号? 忘记密码?
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡