<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title></title>
<link?rel="stylesheet"?type="text/css"?href="css/swiper.css"?/>
<style?type="text/css">
*?{margin:?0;
padding:?0;
}
.container{position:?relative;
width:?600px;
height:?300px;
border:?1px?solid?red;
margin:100px?auto;
}
.tabs?{position:?absolute;
left:?0;
bottom:?0;
height:?50px;
width:?100%;
background-color:?rgba(0,?0,?0,?0.5);
}
.tabs?button?{width:?80px;
height:?30px;
text-align:?center;
}
</style>
</head>
<body>
<div?class="container">
<div?class="tabs">
<button>1</button>
<button>2</button>
<button>3</button>
</div>
<div?class="box?swiper-container">
<div?class="content?swiper-wrapper">
<div?class="swiper-slide">1</div>
<div?class="swiper-slide">2</div>
<div?class="swiper-slide">3</div>
</div>
</div>
</div>
</body>
<script?src="js/jquery.js"?type="text/javascript"?charset="utf-8"></script>
<script?src="js/swiper.js"?type="text/javascript"?charset="utf-8"></script>
<script>
var?mySwiper?=?new?Swiper('.swiper-container');
$('.tabs?button').on('click',?function(e)?{e.preventDefault();
//?獲取當前索引
var?index?=?$(this).index();
mySwiper.slideTo(index,?1000,?false);
});
</script>
</html>
效果:
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
