增加帧动画方法

专题模板/index.html

@@ -22,7 +22,7 @@
 <script type="text/javascript" src="js/common.js"></script>
 <script>
     // 焦点移动插件的配置
-    tsConfig = {
+    var tsConfig = {
         className: '',
         currentIndex: 0,
         rules: {

专题模板/js/common.js

@@ -193,6 +193,34 @@ var comm = {
         ele.appendChild(newEle)
     },
 
+    // 帧动画(定时器容器(存在一个对象内的一个属性),图片群所在的元素,执行速度（单位：毫秒）,是否只执行一次,执行完毕的回调函数)
+    zhenAnimation: function (obj,interval, ele, speed, once, fn) {	
+		// 清除定时器
+		clearInterval(obj[interval])
+		// 获取图片群并全部隐藏
+		var imgs = ele.getElementsByTagName('img')
+		for (var i = 0; i < imgs.length; i++) {
+			imgs[i].style.visibility = 'hidden'
+		}
+		// 单独显示第一张图
+		var i = 0 
+		imgs[i].style.visibility = 'visible'
+		// 设置定时器（其实会跳过第一张图，但感知不到）
+		obj[interval] = setInterval(function() {
+			// 判断是否只执行一次
+			if (i == imgs.length-1 && once) {
+				// 每轮执行完成的回调函数
+				fn&&fn()
+				clearInterval(obj[interval])
+				return
+			}
+			// 前一张图隐藏、后一张图显现、可循环执行
+			imgs[i++].style.visibility = 'hidden'
+			if (i == imgs.length) {i=0; fn&&fn()}
+			imgs[i].style.visibility = 'visible'
+		}, speed)
+	},
+
     /* ====================================================================================== */
 
     setCookie: function (name, value, t) { // 设置cookie
@@ -276,7 +304,7 @@ var comm = {
         })
     },
     createArr: function (arr, num, content) {   // 生成数组，
-        // 传入举例：var arr = [{num: 5, content: {id: 1, imgurl: 'img/1.jpg'}}, {num: 2, content: {id: 2, imgurl: 'img/2.jpg'}}] 
+        // 输出举例：var arr = [{num: 5, content: {id: 1, imgurl: 'img/1.jpg'}}, {num: 2, content: {id: 2, imgurl: 'img/2.jpg'}}] 
         // 调用举例：comm.createArr(arr, 'num', 'content')
 		var newArr = []
 		for (var i = 0; i < arr.length; i++) {
@@ -287,7 +315,8 @@ var comm = {
 			}
 		}
 		return newArr
-	},
+    },
+    
     /* ====================================================================================== */
 
     isPhone: function (phone) { // 判断是否为有效手机号

插件/common.js

@@ -193,6 +193,34 @@ var comm = {
         ele.appendChild(newEle)
     },
 
+    // 帧动画(定时器容器(存在一个对象内的一个属性),图片群所在的元素,执行速度（单位：毫秒）,是否只执行一次,执行完毕的回调函数)
+    zhenAnimation: function (obj,interval, ele, speed, once, fn) {	
+		// 清除定时器
+		clearInterval(obj[interval])
+		// 获取图片群并全部隐藏
+		var imgs = ele.getElementsByTagName('img')
+		for (var i = 0; i < imgs.length; i++) {
+			imgs[i].style.visibility = 'hidden'
+		}
+		// 单独显示第一张图
+		var i = 0 
+		imgs[i].style.visibility = 'visible'
+		// 设置定时器（其实会跳过第一张图，但感知不到）
+		obj[interval] = setInterval(function() {
+			// 判断是否只执行一次
+			if (i == imgs.length-1 && once) {
+				// 每轮执行完成的回调函数
+				fn&&fn()
+				clearInterval(obj[interval])
+				return
+			}
+			// 前一张图隐藏、后一张图显现、可循环执行
+			imgs[i++].style.visibility = 'hidden'
+			if (i == imgs.length) {i=0; fn&&fn()}
+			imgs[i].style.visibility = 'visible'
+		}, speed)
+	},
+
     /* ====================================================================================== */
 
     setCookie: function (name, value, t) { // 设置cookie
@@ -276,7 +304,7 @@ var comm = {
         })
     },
     createArr: function (arr, num, content) {   // 生成数组，
-        // 传入举例：var arr = [{num: 5, content: {id: 1, imgurl: 'img/1.jpg'}}, {num: 2, content: {id: 2, imgurl: 'img/2.jpg'}}] 
+        // 输出举例：var arr = [{num: 5, content: {id: 1, imgurl: 'img/1.jpg'}}, {num: 2, content: {id: 2, imgurl: 'img/2.jpg'}}] 
         // 调用举例：comm.createArr(arr, 'num', 'content')
 		var newArr = []
 		for (var i = 0; i < arr.length; i++) {
@@ -287,7 +315,8 @@ var comm = {
 			}
 		}
 		return newArr
-	},
+    },
+    
     /* ====================================================================================== */
 
     isPhone: function (phone) { // 判断是否为有效手机号

活动模板/index.html

@@ -32,7 +32,7 @@
 <script type="text/javascript" src="js/api.js"></script>
 <script>
     // 焦点移动插件的配置
-    tsConfig = {
+    var tsConfig = {
         className: '',
         currentIndex: 0,
         rules: {

活动模板/js/common.js

@@ -193,6 +193,34 @@ var comm = {
         ele.appendChild(newEle)
     },
 
+    // 帧动画(定时器容器(存在一个对象内的一个属性),图片群所在的元素,执行速度（单位：毫秒）,是否只执行一次,执行完毕的回调函数)
+    zhenAnimation: function (obj,interval, ele, speed, once, fn) {	
+		// 清除定时器
+		clearInterval(obj[interval])
+		// 获取图片群并全部隐藏
+		var imgs = ele.getElementsByTagName('img')
+		for (var i = 0; i < imgs.length; i++) {
+			imgs[i].style.visibility = 'hidden'
+		}
+		// 单独显示第一张图
+		var i = 0 
+		imgs[i].style.visibility = 'visible'
+		// 设置定时器（其实会跳过第一张图，但感知不到）
+		obj[interval] = setInterval(function() {
+			// 判断是否只执行一次
+			if (i == imgs.length-1 && once) {
+				// 每轮执行完成的回调函数
+				fn&&fn()
+				clearInterval(obj[interval])
+				return
+			}
+			// 前一张图隐藏、后一张图显现、可循环执行
+			imgs[i++].style.visibility = 'hidden'
+			if (i == imgs.length) {i=0; fn&&fn()}
+			imgs[i].style.visibility = 'visible'
+		}, speed)
+	},
+
     /* ====================================================================================== */
 
     setCookie: function (name, value, t) { // 设置cookie
@@ -276,7 +304,7 @@ var comm = {
         })
     },
     createArr: function (arr, num, content) {   // 生成数组，
-        // 传入举例：var arr = [{num: 5, content: {id: 1, imgurl: 'img/1.jpg'}}, {num: 2, content: {id: 2, imgurl: 'img/2.jpg'}}] 
+        // 输出举例：var arr = [{num: 5, content: {id: 1, imgurl: 'img/1.jpg'}}, {num: 2, content: {id: 2, imgurl: 'img/2.jpg'}}] 
         // 调用举例：comm.createArr(arr, 'num', 'content')
 		var newArr = []
 		for (var i = 0; i < arr.length; i++) {
@@ -287,7 +315,8 @@ var comm = {
 			}
 		}
 		return newArr
-	},
+    },
+    
     /* ====================================================================================== */
 
     isPhone: function (phone) { // 判断是否为有效手机号