零基础学做网站培训介绍

当前位置:

怎么制作网站连续向上滚动展示版块

有些网站上会有连续向上滚动展示版块,可以不停的滚动展示信息,当鼠标停留在上面时就停止,离开时又继续滚动。常用于企业网站的公司新闻展示,门户网站的图片新闻展示,商城网站的订购信息等。

网站连续向上滚动展示版块

怎么在自己做网站时,制作网站连续向上滚动展示版块呢?下面介绍一下制作方法。

  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. 滚动区域,使用以下的代码制作:
    
    
    <div class="picMarquee-top dinggou-list">
    <div class="bd">

    <ul class="picList">
    <li>李* 成功订购:<span>138**066666</span></li>
    <li>方* 成功订购:<span>135**999999</span></li>
    <li>方* 成功订购:<span>138**166666</span></li>
    <li>苗* 成功订购:<span>138**699987</span></li>
    </ul> </div>
    </div>
    </div>
  5. 最后一步,还要放上向上滚动的JS代码,放在上一步代码的下方。
    
    
    <script type="text/javascript">
    jQuery(".picMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:10,interTime:20});
    </script>

发表评论

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