初步认识Swiper_前端交互控制神器_滚动3D切换等特效简单制作

前言： 本人在项目的工作中负责研发，页面及交互基本都是交给前端去做的。以前前端写的东西大概都知道，都是一些js，css和html等的一些基本控制，都懂！但是今天前端突然做了一个具有特殊效果的dom：页面顶部放了5个包裹元素，包裹可以根据鼠标的拖动产生滚动效果，但是并没有使用正常的滚动条那种样式，而且还能默认实现自动动态滚动到第n个包裹的位置显示？ 这一系列特殊效果的控制，百思不得其解，后来通过一位美女前端了解到，这里面用到了swiper这个神奇的js。

不过swiperjs还在不断的更新中，在使用过程中可能存在问题，需要关注可能出现的问题，一般没事哈！！！

 

先看项目里dom及相关js吧：

可以看到：dom中有大量跟swiper有关的样式：swiper-container,swiper-wrapper,swiper-slide 一些特殊的标记

swiper.js会根据这些标记，控制显示的元素数量，还可以根据swiperapi提供的一些方法如：滚动到默认位置-slideto()，这些就解决了我之前的所有疑惑

<div class="bs-category-outer dropsortlist">
        <div class="swiper-container swiper-container-horizontal order-trackingtips swiper-container-os">
        <ul class="swiper-wrapper">
    #foreach($package in $!{order_info.ordertrackpackages})
            <li class="swiper-slide #if($package.expressno==$!{current_express_no})current#end" expressno="$!{package.expressno}">
                <a href="javascript:void(0);"><span></span>${velocitycount}</a>
            </li>
    #end
        </ul>
       </div>
</div>

//swiper初始化，默认显示4个元素 
var trackingtipsswiper = new swiper('.swiper-container-os', {
    slidesperview: 4,
    observer: true,
    observeparents: true,            
});

//swiper控制页面显示在默认位置
var curspeed = (speed == undefined) ? 200 : parseint(speed);
myswiper.slideto(currentindex, curspeed);

 

总结：附上swiper学习的网址：前端一定要学习和去了解，帮助是很大的，可以通过简短的代码实现出特别好的效果，先简单介绍到这里吧，以后有机会继续学习补充...

swiper中文网站：

swiperapi网站：