原生js实现简单的移动端轮播图效果

叁歲伎倆 2022-05-11 12:40 267阅读 0赞

近期接触了移动端html5和css3，想加入些轮播图，于是在网上搜集整理了一些资料，经自己补充改进使之较为完善

--------------------

原生JavaScript 移动端web轮播图片

### 实现功能 ###

1.  索引小圆点
2.  过渡滑动动画的定时轮播
3.  移动端可以滑动切换图片
4.  滑动距离不够则吸附回去

### 效果图 ###

![70][]![70 1][]

### 代码 ###

1.  slideshow.html
    
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport"
                  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
            <title>移动端-轮播图</title>
            <link rel="stylesheet" href="slideshow.css">
        </head>
        <body>
        <div class="layout">
            <div class="banner">
                <ul class="swipe" id="swipe">
                    <li><a href="#"><img src="images/l5.jpg"></a></li>
                    <li><a href="#"><img src="images/l1.jpg"></a></li>
                    <li><a href="#"><img src="images/l2.jpg"></a></li>
                    <li><a href="#"><img src="images/l3.jpg"></a></li>
                    <li><a href="#"><img src="images/l4.jpg"></a></li>
                    <li><a href="#"><img src="images/l5.jpg"></a></li>
                    <li><a href="#"><img src="images/l1.jpg"></a></li>
                </ul>
                <ul class="swipe-btn-list" id="swipe-btn-list">
                    <li class="now"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
        
        <script src="base.js"></script>
        <script src="slideshow.js"></script>
        </body>
        </html>
    
     
2.  slideshow.css
    
        *,
        ::before,
        ::after{
            padding: 0;
            margin: 0;
            -webkit-box-sizing: border-box;/*兼容移动端主流浏览器*/
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;/*清除移动端点击高亮效果*/
        }
        body{
            font-family:Microsoft YaHei,sans-serif;
            font-size: 14px;
            color: #333;
        }
        ol,ul{
            list-style: none;
        }
        /*清除浮动*/
        .swipe::before,
        .swipe::after{
            content: "";
            display: block;
            height: 0;
            line-height: 0;
            visibility: hidden;
            clear: both;
        }
        
        .layout{
            width: 100%;
            max-width: 750px;
            min-width: 320px;
            margin: 0 auto;
            position: relative;
        }
        .banner{
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .swipe{
            width: 1000%;
            -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
        }
        .swipe li{
            width: 10%;
            float: left;
        }
        .swipe li a{
            display: block;
            width: 100%;
        }
        .swipe li a img{
            width: 100%;
            display: block;
        }
        .swipe-btn-list{
            position: absolute;
            bottom: 6px;
            width: 100%;
            text-align: center;
        }
        .swipe-btn-list li{
            width: 6px;
            height: 6px;
            border: 1px solid #fff;
            border-radius: 50%;
            display: inline-block;
            margin-left: 10px;
        }
        .swipe-btn-list li:first-child{
            margin-left: 0;
        }
        .swipe-btn-list li.now{
            background: #fff;
        }
    
     
3.  base.js
    
        /**
         * Improved by yanzuyue on 2018/10/20.
         */
        
        /*封装一些公用的事件或者公用的方法*/
        /*定义的一个命名空间*/
        window.my = {};
        /*封装一个事件 过渡结束事件*/
        my.transitionEnd = function(dom,callback){
            //1.给谁加事件
            //2.事件触发后处理什么业务
            if(!dom || typeof dom != 'object'){
                //没dom的时候或者不是一个对象的时候 程序停止
                return false;
            }
            dom.addEventListener('transitionEnd', function(){
                callback && callback();
            });
            dom.addEventListener('webkitTransitionEnd', function(){
                callback && callback();
            });
        }
    
     
4.  slideshow.js
    
        /**
         * Improved by yanzuyue on 2018/10/20.
         */
        window.onload = function(){
            /*
             * 1.设置定时器 自动轮播 无缝衔接
             * 2.点需要随着轮播的滚动改变对应的点  改变当前样式
             * 3.手指滑动的时候让轮播图滑动   touch事件  记录坐标轴的改变 改变轮播图的定位（位移css3）
             * 4.当滑动的距离不超过一定的距离的时候  需要吸附回去
             * 5.当滑动超过了一定的距离 需要跳到下一张或者上一张
             * */
        
            var imageCount = 5; //页面中用来轮播的图片有5张
            var banner = document.querySelector('.banner');//轮播图大盒子
            var width = banner.offsetWidth;//图片的宽度
            var imageBox = document.getElementById("swipe");//图片盒子
            var pointBox = document.getElementById("swipe-btn-list");//点盒子
            var points = pointBox.querySelectorAll('li');//所有的点
        
            //公用方法
            //加过渡滑动动画（CSS3 transition 属性）（根据需要可添加ease,linear等属性）
            var addTransition = function(){
                imageBox.style.transition = "all 0.3s";
                imageBox.style.webkitTransition = "all 0.3s";
            };
            //清除过渡（清除图片的 transition 属性）
            var removeTransition = function(){
                imageBox.style.transition = "none";
                imageBox.style.webkitTransition = "none";
            }
            //设置图片的位置，定位（CSS3 transform 属性）
            var setTranslateX = function(translateX){
                imageBox.style.transform = "translateX("+translateX+"px)";
                imageBox.style.webkitTransform = "translateX("+translateX+"px)";
            }
        	
            //自动轮播  定时器  无缝衔接  动画结束瞬间定位
            var index = 1;
            var timer = setInterval(function(){
                index++;		//自动轮播到下一张
                //改变定位  动画的形式去改变  transition transform translate
                addTransition();    //加过渡动画
                setTranslateX(-index * width);  //定位
        		if(index > imageCount)
        			index = 1;
        		setPoint();
            },3500);//设置每隔3.5秒切换一次
        
            //等过渡结束之后来做无缝衔接
        	my.transitionEnd(imageBox, function(){
                removeTransition(); //清除过渡
                setTranslateX(-index * width);  //定位
            });
        	
            //改变当前样式  当前图片的索引（小圆点）
            var setPoint = function(){
                //清除上一次的now
                for(var i = 0 ; i < points.length ; i++){
                    points[i].className = " ";
                }
                //给图片对应的点加上样式
                points[index-1].className = "now";
            }
        
            /*
             手指滑动的时候让轮播图滑动   touch事件  记录坐标轴的改变 改变轮播图的定位（位移css3）
             当滑动的距离不超过一定的距离的时候  需要吸附回去  过渡的形式去做
             当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向） 一定的距离（屏幕的三分之一）
             */
            //touch事件
            var startX = 0; //记录起始  刚刚触摸的点的位置 x的坐标
            var moveX = 0;  //滑动的时候x的位置
            var distanceX = 0;  //滑动的距离
            var isMove = false; //是否滑动过
        
            imageBox.addEventListener('touchstart', function(e){
                clearInterval(timer);   //清除定时器
                startX = e.touches[0].clientX;  //记录起始X
            });
        
            imageBox.addEventListener('touchmove',function(e){
                moveX = e.touches[0].clientX;   //滑动时候的X
                distanceX = moveX - startX; //计算移动的距离
                //计算当前定位  -index*width+distanceX
                removeTransition(); //清除过渡
                setTranslateX(-index * width + distanceX);  //实时的定位
                isMove = true;  //证明滑动过
            });
        
            //在模拟器上模拟的滑动会有问题 丢失的情况  最后在模拟器的时候用window
            imageBox.addEventListener('touchend', function(e){
                // 滑动超过 1/4 即为滑动有效，否则即为无效，则吸附回去
                if(isMove && Math.abs(distanceX) > width/4){
                    //5.当滑动超过了一定的距离  需要 跳到 下一张或者上一张  （滑动的方向）*/
                    if(distanceX > 0){  //上一张
                        index --;
                    }
                    else{   //下一张
                        index ++;
                    }
                }
                addTransition();    //加过渡动画
                setTranslateX(-index * width);    //定位
        
                if(index > imageCount ){
                    index = 1;
                }else if(index <= 0){
                    index = imageCount;
                }
                setPoint();
        
                //重置参数
                startX = 0;
                moveX = 0;
                distanceX = 0;
                isMove = false;
                //加定时器
                clearInterval(timer);   //严谨 再清除一次定时器
                timer = setInterval(function(){
        			index++;
        			addTransition();
        			setTranslateX(-index * width);
        			if(index > imageCount)
        				index = 1;
        			setPoint();
        		},3500);
            });
        };

[70]: https://img-blog.csdn.net/20181020131440987?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l6eV9jc2Ru/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220505/1c452cf3e8d3486a95ae0a93c3d6ac18.png