在用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>

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

superslide滚动插件使用记录-产品滚动-图片滚动的更多相关文章

  1. 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  2. 滚动插件 animatescroll(可以设置要滚动到位置)

     1. 引入   <script src="js/animatescroll.js"></script> 2.设置要滚动到的位置  $('目标位置').an ...

  3. Android高级图片滚动控件,编写3D版的图片轮播器

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...

  4. javascript实现图片滚动

    闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...

  5. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  6. 精心挑选10款优秀的 jQuery 图片左右滚动插件

    在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...

  7. 【精心推荐】12款很好用的 jQuery 图片滚动插件

    这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...

  8. 10款很好用的 jQuery 图片滚动插件

    jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...

  9. jq插件第二款来袭 图片滚动

    这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...

随机推荐

  1. Virtuoso 中的窗口_1

    https://www.cnblogs.com/yeungchie/ hiDisplayAppDBox(简单弹出一个字符串,Tips) prog((TipsForm) hiDisplayAppDBox ...

  2. NodeJS 极简教程 <1> NodeJS 特点 & 使用场景

    NodeJS 极简教程 <1> NodeJS 特点 & 使用场景 田浩 因为看开了所以才去较劲儿.   1. NodeJS是什么 1.1 Node.js is a JavaScri ...

  3. 7.9 NOI模拟赛 C.走路 背包 dp 特异性

    (啊啊啊 什么考试的时候突然降智这题目硬生生没想出来. 容易发现是先走到某个地方 然后再走回来的 然后在倒着走的路径上选择一些点使得最后的得到的最多. 设\(f_{i,j}\)表示到达i这个点选择的价 ...

  4. C/C++编程笔记:C语言成绩管理系统!链式结构的管理系统源码分享

    最近很多同学因为学校的要求,需要完成自己的那个C语言课程设计,于是就有很多人私信或者加我私聊我,问的最多的还是<学生成绩管理系统>,其实当你项目写多了你就会发现:其实各类的管理系统都离不开 ...

  5. luogu 3188 [HNOI2007]梦幻岛宝珠

    LINK:梦幻岛宝珠 时隔多日 我再次挑战这道题.还是以失败告终. 我觉得这一道背包真的有点难度 这是一个数量较少 但是价值和体积较大的背包. 通常的01背包 要不就是体积小 要么是价值小 但这道题给 ...

  6. 获取判断IE版本 TypeError: Cannot read property 'msie' of undefined

    注意:以下方法只适用于IE11 以下: TypeError: Cannot read property 'msie' of undefined jquery1.9去掉了 $.browser  所以报错 ...

  7. [转] SpringBoot返回json 数据以及数据封装

    作者:武哥     来源:武哥聊编程   https://mp.weixin.qq.com/s/QZk0sKxBX4QZiCTHQIA6pg 1. Spring Boot关于Json的知识点 在项目开 ...

  8. python8.3多进程

    from multiprocessing import Processimport time def run1 (name,sex): print(name,sex,"执行进程1" ...

  9. Paper English

    论文中的英语 单词 a arange 整理 ambiguity 含糊的 aggregate 总量 auxiliary 辅助的 alleviate 缓解 aberrant 异常的 akin 类似的 Ac ...

  10. Java高级篇 JVM

    JVM是什么? JVM起了什么作用? JVM包含了什么? JVM中, 一个类 程序是怎么加载的? JVM中垃圾回收机制?