在用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. 史蒂夫-乔布斯(Steve Jobs)斯坦福大学演讲稿(中英对照)

    这是苹果公司和Pixar动画工作室的CEO Steve Jobs于2005年6月12号在斯坦福大学的毕业典礼上面的演讲稿. Thank you. I'm honored to be with you ...

  2. pandas_处理异常值缺失值重复值数据差分

    # 处理异常值缺失值重复值数据差分 import pandas as pd import numpy as np import copy # 设置列对齐 pd.set_option("dis ...

  3. luogu P2252 威佐夫博弈 模板 博弈

    LINK:威佐夫博弈 四大博弈 我都没有好好整理 不过大致可以了解一下. 在这个博弈中 存在一些局面 先手遇到必胜. 不过由于后手必胜的局面更具规律性这里研究先手遇到的局面后手必胜的情况. 这些局面分 ...

  4. 4.26 省选模拟赛 T3 状压dp 差分求答案

    LINK:T3 比较好的题目 考试的时候被毒瘤的T2给搞的心态爆炸 这道题连正解的思路都没有想到. 一看到题求删除点的最少个 可以使得不连通. 瞬间想到最小割 发现对于10分直接跑最小割即可. 不过想 ...

  5. intel:spectre&Meltdown侧信道攻击(五)—— DRAM address mapping

    前面介绍了row hammer,理论上很完美,实际操作的时候会面临很尴尬的问题:内存存储数据最小的单位是cell(就是个电容,充电是1,放电是0),无数个横着的cell组成row,无数个竖着的cell ...

  6. Idea debug报错Command line is too long

    问题: 使用idea开发Java项目,写单元测试,debug时,会有红字报错:Command line is too long 解决方法: 在项目的目录下,找到/.idea/workspace.xml ...

  7. Springboot使用JdbcTemplate的使用

    在spring-boot-starter-jdbc这个依赖包中一共分成四个部分. core,JdbcTemplate等相关核心接口和类 datasource,数据源相关的辅助类 object,将基本的 ...

  8. 基于视频压缩的实时监控系统-sprint3采集端传输子系统设计

    由于jpg本来就是编码压缩后的格式,所有无需重复编码 传输子系统步骤:(1)初始化:a.socket(初始化tcp连接):b.将事件添加到epoll中 (2)事件处理:接收到网络包.发送完网络包 st ...

  9. 网络安全传输系统-sprint3账号管理子系统设计

    part1:sqlite嵌入式数据库移植 1.数据库系统构成:访问数据库应用-->管理数据库系统-->数据库存储(自上而下) 2.数据库中数据以表的形式而存在.表与表之间可能存在关联关系( ...

  10. “随手记”开发记录day06

    今天还是继续完成统计页面,完成的按钮有支出大头和收入来源的饼状图, 由于之前写过相关的代码,这次的任务对我们来说还挺简单的,没有出现什么太大的问题,