angularJS基于TouchSlide的触屏轮播实现
首页 >  Web前端 > AngularJS  > 2017年11月11日阅(1881)评(0
大话主席的TouchSlide插件短小精悍,各种效果也比较实用,非常适合用于移动端的项目。但是在基于angularjs的项目中,轮播的数据是从服务端获取的,需要从服务端拿到数据之后才能执行TouchSlide的方法,而且TouchSlide对于ng-repeat出来的数据极不友好,所以我偏不使用ng-repeat而直接append添加到DOM中,虽说有悖于angularjs的一些初衷,但是问题确实快速的解决了,哈哈,特此贴下代码记录一番,后期再逐渐优化更新。

效果预览:angularjs基于TouchSlide的触屏轮播

TouchSlide各种效果配置信息及下载详见:TouchSlide官网

html部分

<body ng-app="myApp">
<div ng-controller="testCtrl">
    <div id="home-slider" class="home-slider" home-slider>
        <div class="bd"><ul></ul></div>
        <div class="hd"><ul></ul></div>
    </div>
</div>
<script type="text/javascript" src="statics/js/angular.min.js"></script>
<script type="text/javascript" src="statics/js/TouchSlide.1.1.js"></script>
<script type="text/javascript" src="statics/app.js"></script>
</body>

css样式

.home-slider{position:relative;margin:.2rem auto 0;width:7.02rem;height:3rem;border-radius:4px;overflow:hidden;}
.home-slider .bd{position:relative;z-index:0;width:100%;height:100%;overflow:hidden}
.home-slider .bd ul li{height:3rem;}
.home-slider .bd ul li a{display:block;}
.home-slider .bd ul li img{display:block;width:100%;height:100%;}
.home-slider .hd{position:absolute;z-index:1;right:.4rem;bottom:.1rem}
.home-slider .hd ul li{display:inline-block;float:left;margin:0 .05rem;width:.12rem;height:.12rem;background:rgba(255,255,255,.8);line-height:2;overflow:hidden}
.home-slider .hd ul li.on{background:#eea430}

app.js

angular.module('myApp', [])
.service('apiService', ['$http', '$q', function($http, $q){
	this.serverUrl = "";
	//请求参数处理
	this.handleParams = function(params){
		params = params ? params : {};
		params.t = new Date().getTime();
		return params;
	};
	//get请求
	this.c_get = function(api, params){
		var deferred = $q.defer();
		var allParams = this.handleParams(params);
		var url = this.serverUrl + api;
		$http.get(url, {params:allParams}).then(function successCallback(res){
			if(res.data.code*1 === 666){
				deferred.resolve(res.data);
			}
		},function errorCallback(res){
			
		});
		return deferred.promise;
	};
	this.homeSlider = function(params){
		return this.c_get("demoApi.php",params);
	};
}])
.factory('getSliderData',['$q','apiService', function($q,apiService){
	return{
		indexSlider: function(){
			var deferred=$q.defer();
			apiService.homeSlider({action:"getSlider",num:4}).then(function(res){
				var sData = {list:"",config:""};
				if(res.data.length > 0){
					sData.list = res.data;
				}else{
					sData.list = [
						{id:1,url:"#",img:"statics/images/1.jpg"}
					];
				}
				sData.config = {slideCell:"#home-slider",titCell:".hd ul",mainCell:".bd ul",effect:"leftLoop",autoPlay:true,autoPage:true,delayTime:500,interTime:3000};
				deferred.resolve(sData);
			});
			return deferred.promise;
		}
	}
}])
.directive('homeSlider',['getSliderData', function(getSliderData){
	return {
		restrict:'EA',
        scope: true,
		link:function(scope,element,attrs){
			getSliderData.indexSlider().then(function(res){
				var len = res.list.length;
				var ulEle = angular.element(element.children()[0]).find('ul')[0];
				for(var i=0;i<len;i++){
					angular.element(ulEle).append('<li><a href="'+res.list[i].url+'"><img src="'+res.list[i].img+'"/></a></li>');
				};
				TouchSlide(res.config)
			});
		}
	};
}])
.controller('testCtrl',['$scope', function($scope){
	console.log("i am test home slider controller...")
}])

相关资料

css控制单行或多行文本溢出显示省略号
text-align:justify实现单行文本两端对齐

有朋自远方来...评论一下呗O(∩_∩)O哈哈~

QQ
昵称*
邮箱*
主页