js Swiper移动设备触控滑块的框架(进阶展示文字)

• 这篇文章延续了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();
                }
            });
        });
    })