angular组件写的轮播图
用<swipe></swipe>标签进行复用
index.html
<!DOCTYPE html>
<html ng-app='wsscat'>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body ng-controller="indexCtrl">
{{text}}
<swipe></swipe>
<swipe></swipe>
</body>
<script src="angular.js"></script>
<script>
var app = angular.module('wsscat', []);
app.controller('indexCtrl', function($scope) {
$scope.text = "轮播图"
$scope.images = ['denglu.png']
})
app.directive('swipe', function($interval) {
return {
templateUrl: 'template.html',
link: function(scope, elm, attr) {
console.log(scope)
console.log(elm.find('li').length)
elm.addClass("red")
var curIndex = 0, //当前index
imgLen = elm.find('li').length;
var autoChange = setInterval(function() {
if(curIndex < imgLen - 1) {
curIndex++;
} else {
curIndex = 0;
}
//调用变换处理函数
changeTo(curIndex);
}, 2500);
function changeTo(num) {
var goLeft = num * 400;
elm.find('ul').css("left", "-" + goLeft + "px")
elm.find("li").removeClass("infoOn").eq(num).addClass("infoOn");
elm.find("li").removeClass("indexOn").eq(num).addClass("indexOn");
}
}
}
})
</script>
</html>
template.html
<div id="banner">
<!-- 轮播部分 -->
<ul class="imgList">
<!-- 图片部分 -->
<li>
<a href="#"><img ng-src="{{images[0]}}"></a>
</li>
<li>
<a href="#"><img ng-src="{{images[0]}}"></a>
</li>
<li>
<a href="#"><img ng-src="{{images[0]}}"></a>
</li>
<li>
<a href="#"><img ng-src="{{images[0]}}"></a>
</li>
<li>
<a href="#"><img ng-src="{{images[0]}}"></a>
</li>
</ul>
</div>
<style type="text/css">
body,
div,
ul,
li,
a,
img {
margin: 0;
padding: 0;
}
ul,
li {
list-style: none;
}
a {
text-decoration: none;
}
#wrapper {
position: relative;
margin: 30px auto;
width: 400px;
height: 200px;
}
#banner {
position: relative;
width: 400px;
height: 200px;
overflow: hidden;
}
.imgList {
position: relative;
width: 2000px;
height: 200px;
z-index: 10;
overflow: hidden;
transition: left 2.5s;
}
.imgList li {
float: left;
display: inline;
}
.imgList li a img{
width: 400px;
height: 200px
}
</style>
angular组件写的轮播图
用
<swipe></swipe>标签进行复用index.html
template.html