原生js写swiperjs(电影海报滑动特效)

作者: xiaoaiai | 来源:发表于2017-08-04 14:25 被阅读0次

原生js写swiperjs(电影海报滑动特效)
移动端touch事件影响click事件以及在touchmove添
从事件原理彻底解决WebView与ViewPager(水平),S
原生js写移动端弹窗，滑动
Swiper - 免费开源、功能强大的触摸滑动 js 特效插件
文字特效
js原生滑动事件
轮播图（2）——基于JQ的左右滑动轮播
常见tab效果的实现
全屏滑动原生js版

html部分(请在chrome 的手机模式下测试)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/swiper.css" />
    </head>

    <body>
        <section class="container">
            <section class="bg">
                ![](img/01.jpg)
            </section>
            <section class="swiper">
                <ul>
                    <li>
                        <a href="http://baidu.com">
                            ![](img/01.jpg)
                        </a>
                    </li>
                    <li>
                        <a href="http://baidu.com">
                            ![](img/02.jpg)
                        </a>
                    </li>
                    <li>
                        <a href="http://baidu.com">
                            ![](img/03.jpg)
                        </a>
                    </li>
                    <li>
                        <a href="http://baidu.com">
                            ![](img/04.jpg)
                        </a>
                    </li>
                    <li>
                        <a href="http://baidu.com">
                            ![](img/05.jpg)
                        </a>
                    </li>
                    <li>
                        <a href="http://baidu.com">
                            ![](img/06.jpg)
                        </a>
                    </li>
                </ul>
            </section>
        </section>
        <script src="js/swiper.js" type="text/javascript" charset="utf-8"></script>
    </body>

</html>

less部分

@charset "utf-8";

*{margin: 0;padding: 0;}
li{list-style: none;}
html,body{max-width: 640px;margin: 0 auto;}
.container{width: 100vw;height: 100vh;background: #f5f5f5;position: relative;
    .bg{position: absolute;top: 0;left: 0;right: 0;bottom: 0;
        img{width: 100%;height: 100%;display: block;filter: blur(10px);}
    }
    .swiper{width: 100vw;height: 60vh;position: absolute;top: 20vh;overflow: hidden;
        ul{width: 500%;display: flex;flex-direction: row;flex-wrap: nowrap;
            li{width: 100%;height: 60vh;
                img{display: block;height: 60vh;margin: 0 auto;}
            }
        }
        
    }
}

javascript部分

var swiper = function(){
    
    var oSwiper = document.querySelector('.swiper');
    var oUl = oSwiper.querySelector('ul');
    var oLi = oUl.querySelectorAll('li');
    var liLength = oLi.length;
    var startX = '0'; //手指X位置初始化,初始化ul的translateX的位置
    var startPoint = '0'; //初始化手指对象
    var num = 0;  //初始化显示第几张
    var oW = oSwiper.offsetWidth;
    var oBg = document.getElementsByClassName('bg')[0];
    var oImg = oBg.getElementsByTagName('img')[0];
    init();
//  当前X位置 = 原先X值 + (移动量)手指
    oSwiper.addEventListener('touchstart',function(e){
//      oUl.style.transition = '';
//      console.log(e);
        startPoint = e.changedTouches[0];
        oUl.style.transition = '';
        startX = cssTransform(oUl,'translateX');
//      console.log(startX);
    },false)
    oSwiper.addEventListener('touchmove',function(e){
        var nowPoint = e.changedTouches[0]; 
        var disX = nowPoint.clientX - startPoint.clientX;
        var translateX = parseInt(startX) + parseInt(disX);
        cssTransform(oUl,'translateX',translateX);
//      console.log(translateX);
    },false)
    oSwiper.addEventListener('touchend',function(e){
        var endPoint = e.changedTouches[0];
        var l = cssTransform(oUl,'translateX');
        num = Math.round(-l/oW);
        if(num < 0){
            num = 0;
            autoPlay();
        }else if(num >= liLength){
            num = liLength-1;
            autoPlay();
        }else{
            autoPlay();
        }
        autoBg();
    })
    
    function autoPlay(){
        oUl.style.transition = '0.5s';
        cssTransform(oUl,'translateX',-num*oW);
    }
    
    function autoBg(){
        var z = oLi[num].getElementsByTagName('img')[0].src;
        oImg.transition = '0.5s';
        oImg.src = z;
        console.log(z);
    }
    
    
    
//  初始化
    function init(){
        oUl.style.width = liLength+'00%';
        cssTransform(oUl,'translateX','0');
        cssTransform(oUl,'translateY','0');
    }
    
//  封装一个transform属性
    function cssTransform(obj,attr,val){
        obj.transform = obj.transform || {};
        if(arguments.length === 3){
            obj.transform[attr] = val;
            var strVal = '';
            for(var key in obj.transform){
//              这里的key就是 transform的属性 translateX
//              这个str就是  translateX
                strVal += key+'('+obj.transform[key]+'px)';
            }
            obj.style.transform = strVal;
        }else if(arguments.length === 2){
            val = obj.transform[attr];
            if(typeof val === 'undefined'){
                val = 0;
            }
//          console.log(val)
            return val;
        }
    }
    
    
    
    
    
    
}

swiper();

下面是我用的图片