jQuery TAB选项卡切换幻灯片特效

最新推荐文章于 2022-11-05 20:49:30 发布
最新推荐文章于 2022-11-05 20:49:30 发布
阅读量636 收藏 1
点赞数 1
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenzhilanyu2012/article/details/51206339
版权 

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery TAB选项卡切换幻灯片特效</title>



<link rel="stylesheet" href="css/reset.css">

<link rel="stylesheet" >

<link rel="stylesheet" type="text/css" href="css/style.css">



</head>

<body>

<section class="htmleaf-container">

<div class="landing-slider"> 



<!--tabSlider-->

<div class="tabSlider">

<div class="ts-items"> 



<!-- Single item -->

<div class="ts-item is-active">

<div class="ts-banner"> <img src="img/621.jpg" alt="alt goes here" /> </div>

<div class="ts-container set-layout thumb-cont">

<div class="ts-thumbnail"> <img src="img/iphone.png" alt="alt" /> </div>

<div class="ts-content">

<div class="ts-title"> consectetur adipiscing elit </div>

<a href="" class="ts-btn pull-right set-icon to-right"> <span>Lorem ipsum dolor sit amet</span> <small>Quisque eget tincidunt erat</small> <i class="fa fa-arrow-circle-right"></i> </a> </div>

</div>

</div>



<!-- Single item -->

<div class="ts-item">

<div class="ts-banner"> <img src="img/622.jpg" alt="alt goes here" /></div>

<div class="ts-container set-layout thumb-cont">

<div class="ts-thumbnail"> <img src="img/s3.png" alt="alt" /> </div>

<div class="ts-content">

<div class="ts-title"> Title </div>

<a href="" class="ts-btn pull-right set-icon to-right"> <span>Quisque eget tincidunt erat</span> <small>Donec dignissim consectetur</small> <i class="fa fa-arrow-circle-right"></i> </a> </div>

</div>

</div>



<!-- Single item -->

<div class="ts-item">

<div class="ts-banner"> <img src="img/623.jpg" alt="alt goes here" /> </div>

<div class="ts-container set-layout thumb-cont">

<div class="ts-thumbnail"> <img src="img/lumia.png" alt="alt" /> </div>

<div class="ts-content">

<div class="ts-title"> Lorem ipsum dolor sit amet </div>

<a href="" class="ts-btn pull-right set-icon to-right"> <span>Donec dignissim consectetur</span> <small>Praesent at enim vel nibh</small> <i class="fa fa-arrow-circle-right"></i> </a> </div>

</div>

</div>

</div>

<nav class="ts-control">

<div class="ts-container">

<ul>

<li class="is-active"><i class="ts-icon auto"></i> <span>Slide 1</span></li>

<li><i class="ts-icon medical"></i> <span>Slide 2</span></li>

<li><i class="ts-icon food"></i> <span>Slide 3</span></li>

</ul>

</div>

</nav>

</div>

<!--/tabSlider--> 

</section>



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

<script type="text/javascript">

$(function(){

$('a').on('click', function(){ return false; }); 



// set item banner

$('.ts-item').first().show();

$('.ts-item').each(function () {

var $this = $(this),

_imgSrc = $this.find('.ts-banner img').attr('src');



if(_imgSrc)

$this.css('background-image', 'url(' + _imgSrc + ')');

});



$('.ts-control li').on('click', function(){

var $this = $(this),

_index = $this.index();



$("li.is-active").removeClass("is-active");

$(this).addClass("is-active");



$('.ts-item.is-active').removeClass('is-active').fadeOut();

$('.ts-item').eq(_index).addClass('is-active').fadeIn();



return false;

});



var ww = $(window).width();

});

</script>

</body>

</html>




效果图


xxiaowen
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
王迪
09-28 3179
1、实现效果： 案例描述：当用户单击不同的导航时，与其对应的内容回相应的呈现。 案例要求：使用jquery制作实现tab选项卡单击切换效果。 2、实现思路： （1）div+css布局，制作导航和对应内容区域。 （2）给导航添加点击事件 （3）一次只能选中一个导航条（元素），当单击该元素时，给其增加选中的特殊样式，同时控制其他兄弟元素，移除特殊样式。 （4）导航条和内容区的两...
jQuery TAB选项卡切换幻灯片特效.zip
07-11
代码简介：jQuery TAB选项卡切换幻灯片特效是一款基于jQuery CSS3实现的响应式TAB选项卡样式幻灯片代码。
jQuery TAB栏切换效果
火星基地
10-27 474
实现效果： 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l
仿网页tab标签切换ppt特效模板.rar
09-10
鼠标在上面出现提示，鼠标触发提示效果ppt模板。
tab标签样式图片幻灯片切换效果.zip
07-16
tab标签样式图片幻灯片切换效果。
jQuery二级多级选项卡tab特效
06-09
一款扁平风格jQuery响应速度很快的二级选项卡多级选项卡，顾名思义，就是选项卡中包含了下级选项卡，支持多种样式，当然这样你去调试了。
jQueryTAB选项卡切换幻灯片特效.zip
07-11
"jQuery TAB选项卡切换幻灯片特效"是一个利用jQuery和CSS3技术实现的功能，用于创建交互式的选项卡式内容展示，同时具备幻灯片切换的效果，尤其适用于内容丰富的网站，如产品展示、新闻资讯或者用户评价等板块。...
jQuery TAB选项卡切换幻灯片特效特效代码
03-20
jQuery TAB选项卡切换幻灯片特效是Web开发中一种常见的交互设计，用于提供多内容展示，用户可以通过点击不同的选项卡来切换不同的内容区域，通常应用于新闻列表、产品展示、用户评论等场景。这款特效利用了...
多级tab切换，jquery
黑猫警长博客
09-05 1752
&lt;html&gt; &lt;head&gt; &lt;title&gt;多级tab&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script&gt; //定义函数 function tab(tabID,
jquery常见特效之TAB切换栏
。
06-01 243
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;test&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"&amp
实用jquery+CSS实现流畅tab切换效果(Coda-Slider 1.1.1)插件
08-26
实用jquery+CSS实现流畅tab切换效果(Coda-Slider 1.1.1)插件
OFFICE 2016PPT切换成变形功能
03-21
启用Office2016变形功能
jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果
九州县令的博客
06-12 249
相信选项卡切换是大家常用的效果 单独写一个选项卡切换很方便 但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> <div class="nav"> <span class="on">新闻</span> <span>热点</span> <span>动态</span> </div>
滑动选项卡
djsknsns的博客
11-05 184
滑动选项卡JQ
超好用的简单的jquery tab选项卡切换代码（点击切换和导航栏滑过）
weixin_33700350的博客
06-14 1203
实例1（点击切换）：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlns="http://www.w3.org/1999/xhtml"> &...
tabs切换效果，控制对应的文章显示
weixin_44110923的博客
06-22 94
这里展示是4块文章列表已调出，需要根据标题类型，显示对应的li内容。废话不多说直接上代码： HTML代码如下： <div class="pannel right3"> <h2> <b>巡检记录</b> <span id="tab5"> <a href="javascript:;"
前端tab栏切换/选项卡的实现（JS原生+jQuery两种方法实现）
IlPoppylI的博客
03-03 3050
前端tab栏切换/选项卡的实现(JS/DOM)源码+示例
slick插件在tab中不显示（和display:none 冲突）
qq_38519358的博客
06-17 1353
slick是一款非常强大的轮播组件，所以很多地方都会使用到。 最近项目出现了这种情况，就是在tab页中使用slick组件，因为tab是display属性控制的，当轮播slick在隐藏的tab中是不会显示的，因此就造成了，切换tab到轮播页面的时候轮播组件未正常工作，出现轮播页空白的情况。 这里其实slick api有提供对应的解决方案，那就是refresh()这个方法，我们要做的就是在tab页切换的时候调用一下refresh方法，让轮播组件重新加载一遍。 以下是具体方案： <style&gt
jQuery插件-Slider轮播图
qq_38885729的博客
02-20 6844
JQuery插件-Slider轮播图插件下载Slider的使用 插件下载 Jquery插件提供了许多方便好用的插件，便于开发者使用！ 基于jQuery实现的轮播图插件下载地址：https://www.jq22.com/jquery-info23463 本篇博客主要是描述一下最简单的jQuery轮播图的使用，jQuery插件库中还提供了很多其他的轮播图实现！可以去jquery插件库-轮播图进行查看。 下载完成后，解压缩包！ Slider的使用 解压后的文件打开后有一个Slider目录，进入该目录可以看到如
jquery实现tab选项卡切换
最新发布
05-17
可以用以下代码实现基本的Tab选项卡切换： HTML代码： ``` <div class="tab"> <ul class="tab-menu"> <li class="active"><a href="#tab-1">Tab 1</a></li> <li><a href="#tab-2">Tab 2</a></li> <li><a href=...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值