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

时间:2022-08-05 06:24:39

<!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>




效果图

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