最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

SuperSlide焦点图_Tab切换_图片滚动_无缝滚动

来源:http://www.erdangjiade.com/ 沐浴春风 2013-12-12 02:02浏览(2557)

SuperSlide万能特效,网站上常用的“焦点图/幻灯片”、“Tab标签切换”、“图片滚动”、“无缝滚动”、“导航”、“手风琴”等等只需要一个SuperSlide即可解决!。本文以“标签切换”为例。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

SuperSlide焦点图_Tab切换_图片滚动_无缝滚动
分类:图片代码 > 图片轮播 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

因为SuperSlide是基于jQuery的插件,所以前提必须先引用jQuery,再引用SuperSlide

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.SuperSlide.2.1.1.js"></script>

HTML

以下是默认的HTMl结构,分别是 ".hd" 里面包含ul, ".bd" 里面包含ul

<div class="slideTxtBox">
    <div class="hd">
        <ul><li>教育</li><li>培训</li><li>出国</li></ul>
    </div>
    <div class="bd">
        <ul>
            <li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布!</a></li>
            ...
        </ul>
        <ul>
            <li><a href="http://www.SuperSlide2.com" target="_blank">名师教作文:3妙招巧写高分</a></li>
            ...
        </ul>
        <ul>
            <li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
            ...
        </ul>
    </div>
</div>

jQuery

调用SuperSlide,因为是默认HTML结构,所以参数都为默认值,不用填写titCell、mainCell等。

<script type="text/javascript">$(".slideTxtBox").slide(); </script>

如果您想了解更多,可以查看 焦点图/幻灯片图片滚动无缝滚动导航手风琴,如果您想下载代码研究,可以到下载页面 。还要告诉大家个密码,素材火首页banner也用的这个插件..嘻嘻^_^..

SuperSlide参数设置

参数 描述 默认值
autoPage 支持自定义分页html,$为数字替换位置。例如autoPage: false
titCell 导航元素对象(鼠标的触发元素对象) &quot;.hd li&quot;
mainCell 切换元素的包裹层对象 &quot;.bd&quot;
effect 动画效果 fade:渐显; || top:上滚动;|| left:左滚动;|| topLoop:上循环滚动;|| leftLoop:左循环滚动;|| topMarquee:上无缝循环滚动;|| leftMarquee:左无缝循环滚动; &quot;fade&quot;
autoPlay 自动运行 false
interTime 毫秒;自动运行间隔。当effect为无缝滚动(topMarquee/leftMarquee)时,相当于运行速度。 2500
delayTime 毫秒;切换效果持续时间(一次切换效果执行所用的时间长度)。 500
trigger titCell触发方式 || mouseover:鼠标移过触发;|| click:鼠标点击触发; &quot;mouseover&quot;
scroll 每次滚动个数。 1
vis visible缩写,mainCell的可视范围个数,当实际内容个数少于可视个数的时候,不执行SuperSlide效果。 1
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/7.html
评论1
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 沙发
    04-05 21:02
    aahanbb
    看了好几个,还是这个好用
1 2