【Vue】轮播图(左右箭头、自动播放函数封装)

*此处JavaScript代码引入了Vue.js（该文件可到官网自行下载）和animate.js（该文件是自己封装的一个动画函数【代码在下方】）

一、HTML图片和左右箭头

<!-- 此处为产品特色【*图片地址和类名记得自行更改】 -->
<div id="app">
	<div class="cpts">
		<!-- 轮播图 -->
		<ul class="cpts-lbt" @mouseover="stopMove(obj[0])" @mouseleave="autoMove('.cpts-right', 3000, obj[0])">
			<li><img src="./images/zcgljzh.png" /></li>
			<li><img src="./images/cgzsdyh.png" /></li>
			<li><img src="./images/jcjktyh.png" /></li>
			<li><img src="./images/jkyth.png" /></li>
		</ul>
		<!-- 左右箭头 -->
		<a class="cpts-left" href="javascript:;" @click="leftMove('.cpts-lbt', 1080, 1, obj[0])" @mouseover="stopMove(obj[0])" @mouseleave="autoMove('.cpts-right', 3000, obj[0])"></a>
		<a class="cpts-right" href="javascript:;" @click="rightMove('.cpts-lbt', 1080, 1, obj[0])" @mouseover="stopMove(obj[0])" @mouseleave="autoMove('.cpts-right', 3000, obj[0])"></a>
	</div>
</div>

二、CSS轮播图样式

<style>
	.cpts{
		position: relative;  /* 必填：父节点相对定位 */
		overflow: hidden;    /* 必填：测试时可注释该行 */

		/* width、height为图片宽、高度，此处为1080*500；*/
		width: 1080px;
		height: 500px;  /* 若不设定高度，overflow:hidden后，可能会出现图片不显示问题 */
	}
	.cpts ul{
		position: absolute;  /* 必填：ul绝对定位，用于改变x轴 */
		width: 5400px;       /* 必填：图片宽度【此处为1080px】*图片数量【此处4张+1张克隆(第一张)图】 */
	}
	.cpts ul li{
		float: left;  /* 必填：li左浮动，使图片位于一行 */
	}
	/* 轮播图箭头 */
	.cpts-left, .cpts-right{
		position: absolute;    /* 必填：箭头图定位在轮播图中 */
		z-index: 999;   /* 自行设定：箭头图的数值大于轮播图的数值 */
		
		/* width、height自行设定【箭头图的宽高】 */
		display: inline-block;
		width: 32px;
		height: 32px;
	}
	/* 左右箭头【rem数值跟随自己的箭头图更改】 */
	.cpts-left{
		background: url(../images/slider-arrow.png) no-repeat -174px 0;
	}
	.cpts-right{
		background: url(../images/slider-arrow.png) no-repeat -58px 0;
	}
	/* 箭头经过改变样式【若为移动端则无鼠标经过，此处注释掉了，web端可打开以下注释】 */
	/* .cpts-left:hover, .fa-first-left:hover, .itsb-left:hover{
		background-position: -116px 0;
	}
	.cpts-right:hover, .fa-first-right:hover, .itsb-right:hover{
		background-position: 0 0;
	} */
	/* 产品特色-箭头定位【自行设定】 */
	.cpts-left,.cpts-right{
		top: 50%;
		transform: translateY(-50%);
	}
	.cpts-left{
		left: 10px;
	}
	.cpts-right{
		right: 10px;
	}

	/* 此处进行了格式化，注意li标签需要取消小圆点 */
	*{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
</style>

三、引入animate.js和Vue.js文件,编写JavaScript代码【此处考虑后期轮播图总数和图片移动个数不同，进行了封装】

animate.js代码如下：

/**
 * 动画函数
 * @param {*} obj 
 * @param {*} target 
 * @param {*} callback 
 */
// 动画函数封装(obj：目标对象，target：目标位置, callback：回调函数)
function animate(obj, target, callback){
    // 运行之前先清除以前的定时器，只保留当前的（防止连续点击）
    clearInterval(obj.timer);
    // 添加定时器
    obj.timer = setInterval( function(){
        // 步长值： （目标值 - 当前位置）/ 10   --改为整数，不要出现小数
        var step = (target - obj.offsetLeft) / 10;
        // 步长值大于0向上取整，小于0向下取整
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        // 停止动画
        if(obj.offsetLeft == target ){
            clearInterval(obj.timer);
            // 回调函数在定时器结束之后
            // if(callback){
            //     callback();
            // }
            // 利用短路运算符【如果callback==true，执行callback()】
            callback && callback();
        }
        // 开始运动
        obj.style.left = obj.offsetLeft + step +'px';
    }, 15)
}

引入 animate.js 和 vue.js 文件后开始编写：

<!-- 此处在html文件中引入了 animate.js 和 vue.js 文件 -->
<script type="text/javascript" src="../js/animate.js"></script>
<script src="../js/vue.js"></script>

<script>
	var vm = new Vue({
	    el: '#app',
	    data: {
	        // 轮播图的索引数和定时器 --2个对象代表一页有2个轮播图（互不影响）
	        obj:[
	            {id: 'obj1', num: 0, timer: null},   //第一个轮播图
	            // {id: 'obj2', num: 0, timer: null},   //第二个轮播图【若一个页面用两个不同的轮播图，此为第二个】
	        ],
	        // 节流阀(处理连续点击左右箭头图片过快问题)【此处未生效，暂未查出原因】
	        flag: true, 
	    },
	    methods: {
	        // 克隆显示的图片数量-封装
	        // ulName：类名或id名【此处用的类名】
	        // photoCount：需要克隆的图片数量
	        clonePhoto(ulName, photoCount){
	            var ul = document.querySelector(ulName);
	            
				for(var i=0; i<photoCount; i++){
					var photo = ul.children[i].cloneNode(true);
					ul.appendChild(photo);
				}
	        },
	        // 轮播图左箭头-封装
	        // ulName：类名或id名【此处用的类名】
	        // photoWidth：图片宽度【注意是 px 还是 rem】
	        // photoCount：克隆的图片数量
	        // obj：定时器对象
	        leftMove(ulName, photoWidth, photoCount, obj){
	            var ul = document.querySelector(ulName);
	            // 若使用的rem布局模式，需要将 rem 转为 px【若 photoWidth 用的 px 无需转换】
	            // photoWidth = Math.floor( photoWidth * parseFloat( document.querySelector('html').style.fontSize ) );
	
	            // 节流阀(处理连续点击左右箭头图片过快问题)
	            if(this.flag == true){
	                // 关闭节流阀
	                this.flag = false;
	                if(obj.num == 0){
	                    obj.num = ul.children.length - photoCount;
	                    ul.style.left = -photoWidth * obj.num + 'px';
	                }
	                obj.num--;
	                
	                animate(ul, -photoWidth * obj.num, function(){
	                    this.flag = true;
	                }.apply(vm));
	            }
	        },
	        // 轮播图右箭头封装【参数与左箭头相同】
	        rightMove(ulName, photoWidth, photoCount, obj){
	            var ul = document.querySelector(ulName);
	            // 若使用的rem布局模式，需要将 rem 转为 px【若 photoWidth 用的 px 无需转换】
	            // photoWidth = Math.floor( photoWidth * parseFloat( document.querySelector('html').style.fontSize ) );
	
	            // 节流阀(处理连续点击左右箭头图片过快问题)
	            if(this.flag){
	                // 关闭节流阀
	                this.flag = false;
	                if(obj.num == ul.children.length-photoCount){
	                    ul.style.left = 0;
	                    obj.num = 0;
	                }
	                obj.num++;
	               	
	                animate(ul, -photoWidth * obj.num, function(){
	                    // 打开节流阀
	                    this.flag = true;
	                }.apply(vm));
	            }
	        },
	        // 自动播放-封装
	        // rightName：右箭头类名或id名
	        // time：多长时间换图【1000为1秒，此处为3秒】
	        // obj：定时器对象
	        autoMove(rightName, time, obj){
	            var right = document.querySelector(rightName);
	            // 自动播放
	            obj.timer = setInterval(function() {
	                // 手动调用点击事件
	                right.click();
	            }, time)
	        },
	        // 停止自动播放轮播图
	        stopMove(obj){
	            clearInterval(obj.timer);
	            obj.timer = null; //清除定时器变量
	        },
		},
		// 页面加载完成后
		mounted: function(){
			// 克隆“产品特色”第一张图
			this.clonePhoto('.cpts-lbt', 1);
			// 自动播放轮播图
			this.autoMove('.cpts-right', 3000, this.obj[0]);
	
			// 设备监控【若一个页面用了两个不同的轮播图，以下为第二个】
			// this.clonePhoto('.itsb-lbt', 2);
			// if(this.flag){
				// this.autoMove('.itsb-right', 3000, this.obj[1]); 
			// }
		}     
	})
</script>