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

• 这篇文章延续了js Swiper首先给大家看一下效果 就是在光标移到此位置时 展示当前slide的标题
  
  

  AC76941F-8AC3-4D81-B5C5-5B01C571A11E.png
  
  *具体操作如下
• head 头部引入一下query的库

2.给每个slide 定义一个id

 

        

            
内容1
            
内容2
            
内容3
            
内容4
            
内容5
            
内容6
            
内容7
            
内容8
            
内容9
            
内容10
        
        

        

    

• 新建一个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();
                }
            });
        });
    })