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

2024-10-25 11:04:39

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

js调用：

代码如下:

jQuery(".slideTxtBox").slide( {effect:"left"} );
jQuery("#doubleSlideTxt").slide( { titCell:".parHd li",mainCell:".parBdIn",effect:"top",trigger:"click" } );

css代码：

代码如下:

/* 双重slide-文本滚动效果 */
#doubleSlideTxt{ width:524px; zoom:1; position:relative; text-align:left; }
#doubleSlideTxt .parHd{ position:absolute; z-index:1; top:10px; left:453px; width:44px; overflow:hidden; }
#doubleSlideTxt .parHd li{ width:14px; padding:5px 5px 5px 5px; line-height:16px; border:1px solid #baccdf; border-left:0;
    margin-bottom:5px; background:#fff; color:#b5c4d3; cursor:pointer; margin-left:1px; }
#doubleSlideTxt .parHd li.on{ background:#dbeefd; font-weight:bold; color:#367399; border-right:3px solid #4e98c6;
    margin-left:0px; position:relative; z-index:100; padding:5px 10px 5px 10px;}
#doubleSlideTxt .parBd{ position:relative; z-index:0; width:440px; left:0px; border:1px solid #baccdf; padding:6px; background:#dbeefd;}
#doubleSlideTxt .parBd .slideTxtBox{ background:#fff; width:400px; border:0; padding:20px;    }
#doubleSlideTxt .parBd .slideTxtBox .hd{ background:#fff; }

HTML:

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "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>

<div id="demoContent">
  <div class="effect">
     <div id="doubleSlideTxt">
       <div class="parHd">
        <ul>
         <li>栏目一</li>
         <li>栏目二</li>
         <li>栏目三</li>
        </ul>
       </div>
       
       <div class="parBd">
         <div class="parBdIn">
           
           <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>
           
           
           <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>
           
           
           <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>
           
         </div>
       </div>
       
     </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>

</body>
</html>

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

CSS标签切换代码实例教程比较漂亮

我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容.与此同时我们发现一些问题,内容的简单排列总使页面很长.滚屏很多才能将显示的内容布局完毕.YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容.我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成. 一.标签切换总体的实现思路: 实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,
jQuery版Tab标签切换

鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换效果图: 源代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮

jquery左右滚动焦点图banner图片,鼠标经过显示上下页适合宽和高都比较大的页面使用演示复制代码代码如下: <div class="bannerbox"> <div id="focus"> <ul> <li><a href="http://www.freejs.net/" target="_blank"> <img src="../da
jquery中实现标签切换效果的代码

核心代码: 复制代码代码如下: $("ul > li").hover(tab); function tab() { $(this).addClass("ll").siblings().removeClass("ll"); var tab = $(this).attr("title"); $("#" + tab).show().siblings().hide(); }; li中和title必须和div
jQuery焦点图切换特效插件封装实例

网站焦点图是一种网站内容的展现形式,可简单理解为一张图片或多张图片展现在网页上就是网站焦点图.在网站很明显的位置,用图片组合播放的形式,类似焦点新闻的意思只不过加上了图片.一般多使用在网站首页版面或频道首页版面,因为是通过图片的形式,所以有一定的吸引性.视觉吸引性.容易引起访问者的点击,据国外的设计机构调查统计,网站焦点图的点击率明显高于纯文字,转化率高于文字标题5倍.由此看来焦点图的能让游客对企业的第一印象大大提升,下面就给大家介绍一个我们项目中封装使用的漂亮大气的全屏焦点图.如下图所示: 可
基于JQuery的实现图片轮播效果(焦点图)

完整的演示代码: JQuery实现图片轮播效果 [实例演示] 1 2 3 4 // = count) return; $("#banner_info").html($("#banner_list a").eq(i).find("img").attr('alt')); $("#banner_info").unbind().click(function(){window.open($("#banner_list a&qu
SuperSlide2实现图片滚动特效

这里贴一下自己演示的代码,期望对使用的朋友所有启发,我这里是结合了两个例子实现的 .focus-item ul li.item{ text-align: center; } .scroll-area .prev,.scroll-area .next{ position: absolute; bottom: 590px; width: 29px; height: 64px; opacity: 0.6; overflow: hidden; display: none; text-indent: -9
一个tab标签切换效果代码

HTML: 复制代码代码如下: <div class="tab"> <div id="tabsK"> <ul id="menu4"> <li onclick="settab(4,0)" class="hover"><a title="最新更新"><span>最新更新</span></a>&l
JQuery学习笔记实现图片翻转效果和TAB标签切换效果第1/2页

所以自己也下了一个来学习,把之前写的几个JS代码都转换成JQuery,既能保证代码的清晰,也保证了代码的通用性,真是一举两得啊,由于是初学者,所以代码有许多的不足,还请大家多多指正:)1.实现图片翻转效果,DW本身提供了这个功能,不过还是自己写的好用,呵呵.之前写的方式比较麻烦,代码也比较乱,用JQuery改造后可以使其更加清晰,核心代码如下: JS代码复制代码代码如下: <script type="text/javascript"> <!-- $(documen
SuperSlide标签切换、焦点图多种组合插件

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

这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实用. 实现的代码. html代码: 复制代码代码如下: <div class="device"> <h2> <a href="javascript:;" class="pre"&
jQuery焦点图轮播插件KinSlideshow用法分析

本文实例讲述了jQuery焦点图轮播插件KinSlideshow用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
基于jQuery实现的图片切换焦点图整理

1.js实现的七屏百叶窗焦点图动态特效可以实现可以同时显示很多找竖行百叶窗效果的缩略图,代码,鼠标悬浮在一张缩略图上时,该图片就在原位置变亮并慢慢展开,同时两边的缩略图就往两边缩小靠近,需要此种焦点图效果的朋友们可以前来下载使用. 在线演示源码下载 2.jQuery+CSS3实现的多种图片切换方式简易焦点图今天要来分享一款简易的jQuery+CSS3焦点图应用,这款焦点图应用的图片切换方式非常丰富,而且焦点图的切换按钮比较小,图片篇幅占据比较大,因此总体比较大气. 在线演示源码下载 3.
jQuery插件Skippr实现焦点图幻灯片特效

史上效果最好的焦点图幻灯片jQuery插件Skippr,轻量级插件.响应式布局插件,强大的参数自定义配置,可自定义切换速度.切换方式.是否显示左右箭头.是否自动播放.自动播放间隔时间等配置参数,调用插件也非常简单易用,调用方式下面介绍下: 1.加载jQuery和插件 <link rel="stylesheet" href="css/jquery.skippr.css"> <script src="js/jquery.min.js&qu
jQuery焦点图切换简易插件制作过程全纪录

首页经常是需要一个焦点图切换的效果,最近做的项目也正好需要,所以在网上搜索,后面查到了一个半成品的插件,这里我自己修改了一下. js文件夹下面有两个文件夹jquery.jslide.js与jquery.jslides.js,前面一个是我改写的,第二个是原作者的文件.下图是效果图: 一.静态效果 <div class="slide_wrap"> <ul id="slides2" class="slide"> <li s
基于jQuery全屏焦点图左右切换插件responsiveslides

基于jQuery全屏焦点图切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载. 效果图如下: 在线预览源码下载 html代码: <script type="text/javascript"> $(function () { // Slideshow $("#slider").responsiveSlides({ auto: true, pager: false, nav: true, speed: 500,
jQuery焦点图插件SaySlide

先来介绍SaySlide 2.0支持自定义如下功能: 1.上下左右方向播放以及jQuery的fadeOut.slideUp.hide效果: 2.自动播放时间间隔和动画播放的的速度: 3.是否显示标题: 4.是否在新窗口打开链接: 5.是否显示底部半透明背景: 6.按钮在底部显示的位置(左中右): 7.按钮默认背景色: 8.按钮激活状态颜色: 9.设置标题文字的样式: 10.触发按钮的事件: 下面就是重点的代码,分享给大家供大家参考,具体代码如下 (function($){ $.fn.saySli
实用的js 焦点图切换效果结构行为相分离

焦点图切换效果,对前端来说,恐怕再熟悉不过了,实现它的方法应该有多种,工作当中常用的一种,叙述如下: 如何让当前的数字导航与图片的显示同步? 这里有两个区域,图片切换区和数字导航区:分别对应着两个循环函数:plays(value)和setBg(value): 当图片循环切换到第2张时,此时数字导航的当前状态也变换到第2的位置,以此达到一种同步的效果,这里的关键就是给他们传递相同的参数value:而这个任务就交给了函数Mea(value): 图片应该是自动切换的,当循环显示到最后一种图片后,返回到

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

相关推荐

随机推荐