<!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" href="http://netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery TAB选项卡切换幻灯片特效.zip （18个子文件） 
jQuery TAB选项卡切换幻灯片特效 jiaoben3997 css 
htmleaf-demo.css 6KB reset.css 774B style.css 25KB img 
622.jpg 161KB
s3.png 5KB lumia.png 5KB iphone.png 92KB ts-icons.png 3KB 623.jpg 94KB 621.jpg 63KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB
index.html 4KB js index.js 0B prefixfree.min.js 6KB jquery-2.1.1.min.js 82KB资源评论
