SuperSlide标签切换、焦点图多种组合插件

前端技术 2023/09/03 JavaScript

此款插件包含在SuperSlide标签切换、焦点图多种组合插件,SuperSlide 是致力于实现网站统一特效调用的函数，能解决大部分标签切换、焦点图切换等效果，还能多个slide组合创造更多的效果。（兼容ie内核(包括无敌的 ie6)、webkit内核、ff、opera等主流浏览器）。适用于网站统一插件库其中包含了网站常用的大部分js效果。文件中包含使用详解。

js调用：

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\"><head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
<meta http-equiv=\"Content-Language\" content=\"zh-CN\">
<meta name=\"Keywords\" content=\"\">
<meta name=\"Description\" content=\"\">
<title>Super Slide</title>
<script type=\"text/javascript\" src=\"../jquery.pack.js\"></script>
<script type=\"text/javascript\" src=\"../jQuery.blockUI.js\"></script>
<script type=\"text/javascript\" src=\"../jquery.SuperSlide.js\"></script>
<link href=\"../default.css\" rel=\"stylesheet\" type=\"text/css\">
<link href=\"../demo.css\" rel=\"stylesheet\" type=\"text/css\">
</head>
<body>
<body>
<!-- content S -->
 <div id=\"demoContent\">
  <div class=\"effect\">
     <div id=\"doubleSlideTxt\">
       <div class=\"parHd\">
        <ul>
         <li>栏目一</li>
         <li>栏目二</li>
         <li>栏目三</li>
        </ul>
       </div>
       <!-- parBd S -->
       <div class=\"parBd\">
         <div class=\"parBdIn\">
           <!-- slideTxtBox S -->
           <div class=\"slideTxtBox\">
            <div class=\"hd\">
             <ul><li><a href=\"\">教育1</a></li><li><a href=\"\">培训1</a></li><li><a href=\"\">出国1</a></li></ul>
            </div>
            <div class=\"bd\">
             <ul class=\"infoList\">
              <li><span class=\"date\">2011-11-11</span><a href=\"\">中国打破了世界软件巨头规则</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">口语：会说中文就能说英语！</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">农场摘菜不如在线学外语好玩</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">数理化老师竟也看学习资料？</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">学英语送ipad2,45天突破听说</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">学外语，上北外！</a></li>
             </ul>
             <ul class=\"infoList\">
              <li><span class=\"date\">2011-11-11</span><a href=\"\">名师教作文：３妙招巧写高分</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">耶鲁小子：教你备考SAT</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">施强：高端专业语言教学</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">数理化老师竟也看学习资料？</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">【推荐】名校英语方法曝光！</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">2012高考“考点”大曝光!!</a></li>
             </ul>
             <ul class=\"infoList\">
              <li><span class=\"date\">2011-11-11</span><a href=\"\">澳大利亚八大名校招生说明会</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">2012世界大学排名新鲜出炉</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">新加坡留学，国际双语课程</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">高考后留学日本名校随你选</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">教育培训行业优势资源推介</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">即刻预约今年最后一场教育展</a></li>
             </ul>
            </div>
           </div>
           <!-- slideTxtBox E -->
           <!-- slideTxtBox S -->
           <div class=\"slideTxtBox\">
            <div class=\"hd\">
             <ul><li><a href=\"\">教育2</a></li><li><a href=\"\">培训2</a></li><li><a href=\"\">出国2</a></li></ul>
            </div>
            <div class=\"bd\">
             <ul class=\"infoList\">
              <li><span class=\"date\">2011-11-11</span><a href=\"\">中国打破了世界软件巨头规则</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">口语：会说中文就能说英语！</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">农场摘菜不如在线学外语好玩</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">数理化老师竟也看学习资料？</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">学英语送ipad2,45天突破听说</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">学外语，上北外！</a></li>
             </ul>
             <ul class=\"infoList\">
              <li><span class=\"date\">2011-11-11</span><a href=\"\">名师教作文：３妙招巧写高分</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">耶鲁小子：教你备考SAT</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">施强：高端专业语言教学</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">数理化老师竟也看学习资料？</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">【推荐】名校英语方法曝光！</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">2012高考“考点”大曝光!!</a></li>
             </ul>
             <ul class=\"infoList\">
              <li><span class=\"date\">2011-11-11</span><a href=\"\">澳大利亚八大名校招生说明会</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">2012世界大学排名新鲜出炉</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">新加坡留学，国际双语课程</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">高考后留学日本名校随你选</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">教育培训行业优势资源推介</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">即刻预约今年最后一场教育展</a></li>
             </ul>
            </div>
           </div>
           <!-- slideTxtBox E -->
           <!-- slideTxtBox S -->
           <div class=\"slideTxtBox\">
            <div class=\"hd\">
             <ul><li><a href=\"\">教育3</a></li><li><a href=\"\">培训3</a></li><li><a href=\"\">出国3</a></li></ul>
            </div>
            <div class=\"bd\">
             <ul class=\"infoList\">
              <li><span class=\"date\">2011-11-11</span><a href=\"\">中国打破了世界软件巨头规则</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">口语：会说中文就能说英语！</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">农场摘菜不如在线学外语好玩</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">数理化老师竟也看学习资料？</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">学英语送ipad2,45天突破听说</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">学外语，上北外！</a></li>
             </ul>
             <ul class=\"infoList\">
              <li><span class=\"date\">2011-11-11</span><a href=\"\">名师教作文：３妙招巧写高分</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">耶鲁小子：教你备考SAT</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">施强：高端专业语言教学</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">数理化老师竟也看学习资料？</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">【推荐】名校英语方法曝光！</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">2012高考“考点”大曝光!!</a></li>
             </ul>
             <ul class=\"infoList\">
              <li><span class=\"date\">2011-11-11</span><a href=\"\">澳大利亚八大名校招生说明会</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">2012世界大学排名新鲜出炉</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">新加坡留学，国际双语课程</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">高考后留学日本名校随你选</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">教育培训行业优势资源推介</a></li>
              <li><span class=\"date\">2011-11-11</span><a href=\"\">即刻预约今年最后一场教育展</a></li>
             </ul>
            </div>
           </div>
           <!-- slideTxtBox E -->
         </div>
       </div>
       <!-- parBd E -->
     </div>
     <script type=\"text/javascript\">
     jQuery(\".slideTxtBox\").slide({effect:\"left\"});
     jQuery(\"#doubleSlideTxt\").slide({ titCell:\".parHd li\",mainCell:\".parBdIn\",effect:\"top\",trigger:\"click\" });
     </script>
  </div>
 </div>
<!-- content E -->
</body>
</html>

以上就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/8809

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案