欢迎您光临自学哈网,只为分享网络知识教程,供大家学习参考!

「自学哈网」SuperSlide网站焦点地图/幻灯片,tab切换,图片滚动,无缝滚动等解决办法

作者 : 自学哈 本文共1808个字,预计阅读时间需要5分钟 2023-05-27 共90人阅读
也想出现在这里? 联系我们

SuperSlide网站焦点地图/幻灯片,tab切换,图片滚动,无缝滚动等解决办法

 

SuperSlide解决了网站的大部分特效问题,保持代码整洁,易于维护和更新。SuperSlide是所有解决常见的“焦点地图/幻灯片”,“选项卡切换”,“图像滚动”,“无缝滚动”等。

从此无需网上苦苦寻觅特效,无需加载n个插件,无需害怕代码冲突,你需要的只是一个SuperSlide!还可以多个SuperSlide组合创造更多效果哦~(兼容包括ie6的绝大部分浏览器)[当年的你是否这样?]

下载地址:http://www.superslide2.com/jquery.SuperSlide.2.1.1.rar

如何使用SuperSlide

1、引用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.1.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”>名师教作文:3妙招巧写高分</a></li>

</ul>

<ul>

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

</ul>

</div>

</div>

3、编写CSS,为HTML赋予样色

认真检查您的css,保证兼容大部分浏览器前提下再调用SuperSlide

.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;  }

4、调用SuperSlide

在本例中,请在 “.slideTxtBox” div结束后立刻调用 SuperSlide,这样会得到的效果,避免整个页面加载后再调用 SuperSlide;

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

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

5、效果如下:

SuperSlide网站焦点地图/幻灯片,tab切换,图片滚动,无缝滚动等解决办法

本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!

自学哈网 » 「自学哈网」SuperSlide网站焦点地图/幻灯片,tab切换,图片滚动,无缝滚动等解决办法
也想出现在这里? 联系我们
© 2022 Theme by - 自学哈网 & WordPress Theme. All rights reserved 浙ICP备2022016594号