SuperSlide插件的使用方法

2024-04-22 10:34:09

1. SuperSlide介绍

网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！

从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！

可以多个SuperSlide组合创造更多效果。

兼容包括ie6的绝大部分浏览器。

2. SuperSlide的使用方法

引用jQuery.js 和 jquery.SuperSlide.js

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

<head>

<script type="text/javascript" src="jquery1.42.min.js"></script>

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

</head>

2）编写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">名师教作文：３妙招巧写高分</a></li>

...

</ul>

<ul>

<li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>

...

</ul>

</div>

</div>

3）编写CSS，为HTML赋予样色

<style>

.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left; }

.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd; position:relative; }

.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px; }

.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer; }

.slideTxtBox .hd ul li.on{ height:30px; background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }

.slideTxtBox .bd ul{ padding:15px; zoom:1; }

.slideTxtBox .bd li{ height:24px; line-height:24px; }

.slideTxtBox .bd li .date{ float:right; color:#999; }

</style>

4）调用SuperSlide

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

效果如下

查看参数以及更多效果展示请参考网站：http://www.superslide2.com/

SuperSlide插件的使用方法相关推荐

前端移动端superslide插件（使用方法）
1.打开官网 SuperSlideTouchSlide官方网站 2.点击上面的 TouchSlide 3.点击上面的如何使用,可以查看使用教程 4.点击上面的下载页面,点击下载插件和全部案例下面 ...
safari java插件故障_safari flash插件故障怎么办 mac safari flash插件故障解决方法
近几日,许多网友都在关注safari flash插件故障怎么办 mac safari flash插件故障解决方法这个话题,那么safari flash插件故障怎么办 mac safari flash插 ...
【Android 插件化】VirtualApp 源码分析 ( 启动应用源码分析 | HomePresenterImpl 启动应用方法 | VirtualCore 启动插件应用最终方法 )
文章目录一.启动应用源码分析 1.HomeActivity 启动应用点击方法 2.HomePresenterImpl 启动应用方法 3.VirtualCore 启动插件应用最终方法一.启动应用源码 ...
idea装python插件_学习idea2020手动安装python插件的实现方法
本文主要介绍了idea2020手动安装python插件的实现方法,分享给大家,具体如下: 自动安装报错手动安装查看idea版本我的版本为 - 201.7846.76 查找版本并下载python插件 ...
osg第三方插件的编译方法（以jpeg插件来讲解）
osg以插件方式来扩展.加载第三方库,如果这些库在程序运行时找不到,就会报类似如下的错误:(这里以jpeg为例): 下面以jpeg为例,讲解jpeg插件的编译方法,其它库和这步骤类似. 先从库的官网下 ...
eclipse插件安装的方法
作者:xyzroundo/Yan eclipse插件安装的方法,有如下几种: 1.link方法: 将插件放到eclipse根目录的xx目录,用xx.link文件关联:(最传统) 2.p2管理:直接将插 ...
【vue开发】vue插件的install方法
MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {// 逻辑.. ...
IntelliJ IDEA下载插件超时--解决方法
IntelliJ IDEA下载插件超时--解决方法方法一:取消使用安全连接方式菜单 -> IntelliJ IDEA -> Preferences -> Apprearance ...
Bootstrap 模态框插件Modal 的方法
方法 Bootstrap模态框插件Modal的方法主要用来打开.关闭.隐藏Bootstrap模态框插件Modal: 1..modal(options) 使用一个可选的对象参数 options 调用 B ...

最新文章

热门文章