零基础学做网站培训介绍

当前位置:

织梦网站如何制作banner轮播图

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

banner轮播图

方法/步骤

  1. 下载导航下拉菜单jquery特效基础包。点击下载 提取码: cme9;
  2. 将下载的压缩包解压出来,将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的js文件夹里;
  3. 在头部模板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>
  4. 使用以下的代码替换原来的网站轮播图代码。(一般在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>
  5. 在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;  }
  6. 在后台创建一个“轮播图”的栏目,把它设置为“隐藏”,然后发几篇文章,上传封面图即可。
    织梦网站banner轮播图
  7. 这样就制作好了织梦网站banner轮播图。

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 分享一个DEDECMS织梦淘客模板,个人比较喜欢使用DEDECMS程序,后台不需要怎么开发,这是我学习了学做网站论坛的织梦仿站课程,自己仿的一个淘客网站,
  • 使用DEDECMS建网站时,根据不同网站类型,需要建立与自己网站风格要求的管理后台,修改了织梦5.7的后台系统,并详细介绍每一块儿的修改方法。此篇
  • 作者: 平价建站Email: 410183779@qq.com详细内容:创业电商建站工作室 ,专注于企业网站建设、设计、仿站、网站复制、页面设计、ps设计flash动画
  • wordpress 添加banner切换图 图文教程附件下载 (120456 次浏览)
    wordpress网站制作banner切换图的方法其实很多,有通过wordpress插件来制作的。但对于做网站的新手来说,能制作出wordpress网站自动调用后台网站内容
  • 图片轮播特效在网站制作过程中经常会用到,它可以让一个“静止”的网站“动”起来。在学做网站论坛以前的建站教程中,也讲过如何制作网站幻灯片,我们在学
  • 在学做网站论坛之前的建站教程,介绍过很多网站轮播切换图幻灯片制作方法,今天再给广大学做网站学员介绍一种网站通栏banner轮播图。适宜各类网站使用
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 在我们仿站过程中,有点网站上带有轮播图,大多都是通过JS+FLASH的方式。这会给网站带来大量的冗余代码。如果你不喜欢,可以用一张图片来替换