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>
最终实现自动滚动效果,并且能够手动翻页。
superslide滚动插件使用记录-产品滚动-图片滚动的更多相关文章
- 网站开发,推荐使用SuperSlide 插件-Tab标签切换,图片滚动,无缝滚动,焦点图
SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...
- 滚动插件 animatescroll(可以设置要滚动到位置)
1. 引入 <script src="js/animatescroll.js"></script> 2.设置要滚动到的位置 $('目标位置').an ...
- Android高级图片滚动控件,编写3D版的图片轮播器
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/17482089 大家好,好久不见了,最近由于工作特别繁忙,已经有一个多月的时间没写博 ...
- javascript实现图片滚动
闲来无事捣鼓了一个原来的js图片滚动 首先看看 静态页的结构: <body> <a href="javascript: le()">向左</a> ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 精心挑选10款优秀的 jQuery 图片左右滚动插件
在现代的网页设计中,图片和内容滑块是一种极为常见和重要的元素.你可以从头开始编写自己的滑动效果,但是这将浪费很多时间,因为网络上已经有众多的优秀的 jQuery 滑块插件.当然,如果要从大量的 jQu ...
- 【精心推荐】12款很好用的 jQuery 图片滚动插件
这里收集了12款很好用的 jQuery 图片滚动插件分享给大家.jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各 ...
- 10款很好用的 jQuery 图片滚动插件
jQuery 作为最流行的 JavaScript 框架,使用简单灵活,同时还有许多优秀的插件可供使用.其中最令人印象深刻的应用之一就是各种很酷的图片效果,它可以让的网站更具吸引力.这里收集了10款很好 ...
- jq插件第二款来袭 图片滚动
这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...
随机推荐
- PHP array_sum() 函数
实例 返回数组中所有值的和(5+15+25): <?php$a=array(5,15,25);echo array_sum($a);?> 运行实例 » 定义和用法 array_sum() ...
- PHP sinh() 函数
实例 返回不同数的双曲正弦: <?phpecho(sinh(3) . "<br>");echo(sinh(-3) . "<br>" ...
- jzyz 题库 题目选做
题库中也有很多我想不出来的模拟赛的题目.做还是必要的.做自己的题目 时间很紧 想想自己的文化课 我又没有那么强 我必须得刷. LINK:水题一道 发现是一道计数题 计数题拿高分的才是王者,但是 计数题 ...
- 借助GPU Boost和K80 Autoboost提高性能
原网站:https://devblogs.nvidia.com/increase-performance-gpu-boost-k80-autoboost/ 由于我主要使用nvidia-smi,故nvc ...
- linux下的node版本管理利器:nvm
nvm是一款node版本管理工具,简单来说,如果你想在一个环境下安装多个node版本,并向自由地切换相关版本,那你就需要使用nvm进行版本管理,有点类似pyenv,也是一款python版本管理工具. ...
- “随手记”开发记录day16
今天先对前两天增加的“修改”功能进行测试.然后进行功能的明显划分,丰富账单的添加和显示方法.
- three.js 着色器材质之变量(二)
上一篇郭先生在例子中用到了着色器变量中的uniform和varying.这篇继续结合例子将一下attribute变量,在使用过程中也发现由于three.js的版本迭代,之前的一些属性和参数已经发生了改 ...
- 17、Observer 观察者模式
以一个实例给大家引入观察者,大家多多少少都写过html或者java中的swing.我们定义一个按钮,给他增加一个点击事件,那么这个方法是怎么被触发到呢,对了,就是利用了观察者设计模式 观察者模式 当对 ...
- sql server 存储过程的(包含事务)方法里面,采用游标循环,批量删除(修改)数据
sqlserver 数据库 1.下面是完整的 在存储过程中 使用游标进行 循环删除的实例(包括存储过程中,事务的应用) 2.有问题的话,欢迎随时讨饶我,相信大家看下注释应该就能明白了,很简单的一个,小 ...
- Python安装工具
1.官网下载地址是:https://www.python.org/downloads/ 默认下载安装时记得勾选配置PATH路径 PIP工具包(我是选择Python 3.5的) 2.Windows 下 ...