- 这篇文章延续了js Swiper首先给大家看一下效果 就是在光标移到此位置时 展示当前slide的标题
AC76941F-8AC3-4D81-B5C5-5B01C571A11E.png
*具体操作如下 - head 头部引入一下query的库
<script type="text/javascript" src="./js/jquery-1.10.1.min.js"></script>
2.给每个slide 定义一个id
<div class="swiper-container swiper-container-h swiper-container-vertical">
<div class="swiper-wrapper">
<div id="swiper-slide1" class="swiper-slide white-slide" data-title="首页" style="height: 617px;" ><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容1</p></div>
<div id="swiper-slide2" class="swiper-slide white-slide" data-title="首页2" style="height: 617px;" ><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容2</p></div>
<div id="swiper-slide3" class="swiper-slide white-slide" data-title="首页3" style="height: 617px;" ><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容3</p></div>
<div id="swiper-slide4" class="swiper-slide white-slide" data-title="首页4" style="height: 617px;" ><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容4</p></div>
<div id="swiper-slide5" class="swiper-slide white-slide" data-title="首页5" style="height: 617px;"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容5</p></div>
<div id="swiper-slide6" class="swiper-slide white-slide" data-title="首页6" style="height: 617px;" ><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容6</p></div>
<div id="swiper-slide7" class="swiper-slide white-slide" data-title="首页7" style="height: 617px;" ><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容7</p></div>
<div id="swiper-slide8" class="swiper-slide white-slide" data-title="首页8" style="height: 617px;" ><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容8</p></div>
<div id="swiper-slide9" class="swiper-slide white-slide" data-title="首页9" style="height: 617px;"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容9</p></div>
<div id="swiper-slide10" class="swiper-slide white-slide" data-title="首页10" style="height: 617px;"><p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容10</p></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-pagination-title"></div>
</div>
- 新建一个div swiper-pagination-title 定义一下样式
.swiper-pagination-title {
position: absolute;
width: 150px;
text-align: right;
color: #a2a2b0;
font-size: 12px;
z-index: 999;
display: none;
- 写方法 注意一下 ＃swiper-slide 获取的是id
$(function () {
$(".swiper-pagination span").on("mouseover mouseout",function(event){
if(event.type == "mouseover"){
var pageinY=$(this).offset().top;
var pageinX=$(this).offset().left;
var pIndex=$(this).index()+1;
var pTitle=$("#swiper-slide"+pIndex).attr("data-title");
$(".swiper-pagination-title").css({"left":+pageinX-160,"top":+pageinY});
$(".swiper-pagination-title").text(pTitle);
$(".swiper-pagination-title").show();
}else if(event.type == "mouseout"){
$(".swiper-pagination-title").text();
$(".swiper-pagination-title").hide();
}
});
$(window).resize(function () {
$(".swiper-pagination span").on("mouseover mouseout",function(event) {
if (event.type == "mouseover") {
var pageinY = $(this).offset().top;
var pageinX = $(this).offset().left;
var pIndex = $(this).index() + 1;
var pTitle = $("#swiper-slide" + pIndex).attr("data-title");
$(".swiper-pagination-title").css({"left": +pageinX - 160, "top": +pageinY});
$(".swiper-pagination-title").text(pTitle);
$(".swiper-pagination-title").show();
} else if (event.type == "mouseout") {
$(".swiper-pagination-title").text();
$(".swiper-pagination-title").hide();
}
});
});
})
