用swiper做简单的评分效果（获取swiper-slide中的值）

原理：和做平常的轮播图相同，只不过是把图片换成数字。评分效果评的分是要提交给后台的，所以要用到form（代码中没有显示，在最外层）和input（type=hidden,不要让input显示出来），每当滚动到某个数字的时候要获取到这个swiper-slide中的数字，并赋值给 input的value上，用swiper的on方法和slideChangeTransitionEnd（swiper从一个slide过渡到另一个slide结束时执行。）回调函数去触发滚动到那个数字就获取这个数字并赋值给这个小块的input。

      当评分结束，把评分的结果返回给后台，后台会进行记录，当我再次查看我的评分的时候显示我上次的评分（打开页面让轮播图滚动到上次评分的数字）.

改变内置的index值（initialSlide），把当前有swiper-slide-active的class名的下标赋值给initialSlide

1、html代码

     

          

              
0
              
1
              
2
              
3
              
4
              
5
              
6
              
7
              
8
              
9
              
10
         
    
                                         
    

2、css样式，先引入swiper.css

.grade{
    width:100%;
    height:100%;
}
.swiper-container{
    width:40px;
    height:40px;
    line-height:40px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-20px;
    margin-top:-20px;
    /*border:1px solid #626262;*/
    z-index:2;
    display:flex;
    flex-direction: column;
    color:#fff !important;
    background:#1356c6;
    overflow: visible;
    opacity:0;
}

.gradeshadow{
    width:40px;
    height:40px;
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-20px;
    margin-top:-20px;
    border-bottom:2px solid #afafae;
    cursor: pointer;
    z-index: 3;
} 
.swiper-wrapper{
    height:40px;
    width:40px;
    
}
.swiper-slide{
    border-left:1px solid #dbdbd9;
    border-right:1px solid #dbdbd9;
    width:40px;
    height:40px !important;
    line-height:40px;
    vertical-align: middle;
    font-size:16px;
    cursor: pointer;
}

3、js代码，先引入swiper.js

 $(function(){
        setTimeout(function(){
            $('.swiper-container').each(function(){
                var that = $(this);
                var initialSlideIndex = parseInt(that.parent().find(':hidden').val());
                if(isNaN(initialSlideIndex) || initialSlideIndex < 0 || initialSlideIndex > 10){
                    initialSlideIndex = 0;
                }
                new Swiper(that,{
                    direction : 'vertical',
                    mousewheel: true,
                    speed:50,
                    initialSlide: initialSlideIndex,
                    on:{
                        slideChangeTransitionEnd:function(){
                            var curSwiper = this;
                            var curSwiperContainer = $(curSwiper.el)
                            curSwiperContainer.siblings(':hidden').val(curSwiperContainer.find('.swiper-slide-active').html());
                        }
                    }
                });
            });
            setTimeout(function(){
                $('.gradeshadow').trigger("click");
            },10);
        },190);
    });
    
        //评分横线消失
        $(".gradeshadow").each(function(k,v){
                    $(v).click(function(e){
                        $(this).siblings(".grade .swiper-container").css({opacity:1})
                        $(this).css({display:"none"})
                    })
                })

        //提交按钮颜色切换
        $('.bottom-button').children().each(
            function (k, v) {
                $(v).click(
                    function () {
                        $(v).addClass("btn-active")
                        $(v).siblings().removeClass("btn-active")
                    }

                )
            }
        )
        
//点击提交按钮进行判断，评价没有完成显示弹出框
        $("#myModal").click(
            function () {
                 
                 $('.gradeshadow').each(function(q,z){
                       if($(z).css('display') == 'block'){
                       $('.smodal').css({display:"block"})
                 }
             })
        })

        //模态窗口消失
        $(".smodal").click(function () {
            $(this).css({
                display: "none"
            })
        })