superslide滚动插件使用记录-产品滚动-图片滚动

 在用wordpress制作一个企业网站时,用到了这个superslide的滚动插件,用于案例、证书等滚动效果。该插件网站在这里:http://www.superslide2.com/

我所使用的wordpress版本是5.4.1,php版本是7.2,Mysql版本是5.6

像往常一样将js放在了网站脚部footer.php中

<script src="<?php echo get_template_directory_uri();?>/js/jquery1.42.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.SuperSlide.2.1.3.js"></script>

并在相应地方放入脚本代码,但并没有滚动效果。

<div class="picScroll-left">
  <div class="hd">
    <a class="next"></a>
    <a class="prev"></a>
  </div>
  <div class="bd">
    <ul class="picList">
      <li>
        滚动的内容
      </li>
    </ul>
  </div>
</div>

<script type="text/javascript">jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:3,trigger:"click"});</script>

 

经过一番调教,最终办法是

首先在<body>下引入2个js

<body>
<script src="<?php echo get_template_directory_uri();?>/js/jquery1.42.min.js"></script>
<script src="<?php echo get_template_directory_uri();?>/js/jquery.SuperSlide.2.1.3.js"></script>

 

然后在脚部再次引入这单独的一个js

<script src="<?php echo get_template_directory_uri();?>/js/jquery.SuperSlide.2.1.3.js"></script>

最终实现自动滚动效果,并且能够手动翻页。

 

posted @ 2020-06-10 09:17  罗家山放牛娃  阅读(337)  评论(0编辑  收藏  举报