在用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. 设置x 轴斜体(每次我都百度,这次单独为它发一个)

    plt.xticks(rotation = 45) 2020-06-07

  2. mysql安装和配置详解以及Navicat连接失败问题

    好久没安装过MySQL了,今天安装了下竟然碰壁了, 就来做个笔记吧.安装步骤如下: 记住:一定要看到最后!!!!!!!!! 一. 安装  1.安装 (https://dev.mysql.com/dow ...

  3. java开发-flyway

    数据库版本管理工具 什么是数据库版本管理? 做过开发的小伙伴们都知道,实现一个需求时,一般情况下都需要设计到数据库表结构的修改.那么我们怎么能保证项目多人开发时,多个数据库环境(测试,生产环境)能够保 ...

  4. __STL_VOLATILE

    _Obj* __STL_VOLATILE* __my_free_list = _S_free_list + _S_freelist_index(__n); _Obj* * __my_free_list ...

  5. mysql 常用的数据类型

    数字类:  整数 tinyint     smallint    mediumint    int       bigint 浮点类:float  double 定点类:decimal(M,D) 日期 ...

  6. C语言学习笔记之原码反码补码

    原码:就是我们自己看的,以及机器输出给我们看的 补码:机器永远是以补码的形式将数据保存在计算机中 正数: 原码=反码=补码 负数: 反码:原码的符号位不变,其他位取反 ,1变0   0变1 补码:机器 ...

  7. [深度学习] Pytorch（三）—— 多/单GPU、CPU，训练保存、加载模型参数问题

    [深度学习] Pytorch(三)-- 多/单GPU.CPU,训练保存.加载预测模型问题 上一篇实践学习中,遇到了在多/单个GPU.GPU与CPU的不同环境下训练保存.加载使用使用模型的问题,如果保存 ...

  8. 谁来教我渗透测试——黑客必须掌握的HTML基础（二）

    今天我们继续看看html的学习笔记. 文本标签 标题标签<hn> 将文本设置为标题显示的标签对.设定标题字体大小,n=1(大)~6(小),标题大小一共有6种,也就是从<h1>… ...

  9. Java—转换流、字符缓冲流

    转换流 OutputStreamWriter 是字符流通向字节流的桥梁:可使用指定的字符编码表,将要写入流中的字符编码成字节.它的作用的就是,将字符串按照指定的编码表转成字节,在使用字节流将这些字节写 ...

  10. vue 公众号H5 使用微信JSAPI 录音 完整齐全

    官方文档必须首当其冲 1.微信jsAPI 录音文档 2.获取微信临时素材文档 首先H5录音功能的话 对于普通H5网上是有很多的方法 插件  但是兼容性很差 特别是对于ios 一开始想的是用H5 做个通 ...