学做网站培训课程介绍

当前位置:

企业网站顶部轮播图如何修改

本课程视频是VIP会员课程,学习请进入VIP学习区

企业网站顶部轮播图是采用JS调用的方法来显示的,我们要修改顶部轮播图,可以直接修改JS文件。

在轮播图文件里找到如下图的代码,找到图片所在的路径,然后使用PS制作一个大小相同,名字相同的图片进行替换即可。

企业网站顶部轮播图代码

除了修改网站本身的轮播图之外,我们也可以用自己的轮播图代码来替换原有的轮播图:(方法见:WordPress网站制作banner轮播图的通用方法)

方法/步骤

  1. 下载导航下拉菜单jquery特效基础包。点击下载 提取码: cme9;
  2. 将下载的压缩包解压出来,将里面的jquery1.42.min.js和jquery.SuperSlide.2.1.3.js二个文件通过FTP工具上传到自己模板的images文件夹里;
  3. 在头部模板header.php里找到</head> 标签,将下的代码放到</head> 标签上面;(注意文件路径)
    
    
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery1.42.min.js"></script>
    <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/static/js/jquery.SuperSlide.2.1.3.js"></script>
  4. 使用以下的代码替换原来的网站轮播图代码。(一般在header.php)
    
    
    <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>
                        <li><a href="<?php echo get_option('home'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/static/picture/banner01.jpg" /></a></li>
                        <li><a href="<?php echo get_option('home'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/static/picture/banner02.jpg" /></a></li>
                        <li><a href="<?php echo get_option('home'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/static/picture/banner03.jpg" /></a></li>
                        <li><a href="<?php echo get_option('home'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/static/picture/banner04.jpg" /></a></li>
                    </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:980px; height:280px; 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. 上传四张轮播图片,图片名为分为:banner01.jpg、banner02.jpg、banner03.jpg、banner04.jpg ,放到自己的图片文件夹里(picture文件夹);
  7. 这样就成功的制作好了wordpress网站banner轮播图。

发表评论

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

相关教程

  • 这个企业模板综合了企业网站的所有必需因素,如公司简介,幻灯片,产品展示,以及大量的产品分类展示,在线留言,产品循环展示等,基本上能满足公司企业网
  • 这是自己学习了仿站课程,自己仿张老师做的超漂亮电器售后企业站(U型动画),特别适合电器售后服务类网站使用,这个电器售后企业站最大的难点就是用了
  • CSS如何调整DIV顶部边距 图文教程 (126157 次浏览)
    作者: wenmp424Email: 1871663623@qq.com详细内容:想把网站LOGO往下调,同时把导航往上调,跟背景图对齐,里面那一句是添加上边距的呢,该怎
  • 使用DZ制作论坛网站时,它的默认情况下,网站顶部是有一个登录框,它的作用可以很方便的让我们去填写用户名和密码。但是有时为了整个版面的美观,防止
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 在我们仿站过程中,有点网站上带有轮播图,大多都是通过JS+FLASH的方式。这会给网站带来大量的冗余代码。如果你不喜欢,可以用一张图片来替换
  • 使用wordpress建网站,安装好了wordpress程序之后,我们可以通过网站后台修改网站标题。下面学做网站论坛就来讲一下wordpress 如何修改网站标题。wo
  • 有时为了网站的帐户的安全,我们会不定期的修改网站用户名的密码,在wordpress网站后台,有一个很方便提供给我们修改网站密码的选项,通过这个选项,