您的位置：首页 > Web前端 > JQuery

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

2016-04-21 10:08 639 查看 
<!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>


效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航