Code Address:
Http://files.cnblogs.com/files/fxnet/%E6%89%8B%E5%86%99angular%E8%BD%AE%E6%92%AD%E5%9B%BE%EF%BC%88%E6%89%8B%E6 %9c%ba%e7%ab%af%e6%97%a0%e7%bc%9d%e7%89%88%ef%bc%89.zip
<meta name= "viewport" content= "initial-scale=1, maximum-scale=1, User-scalable=no, width=device-width" >
<script src= "Angular-1.2.19.min.js" ></script>
<script src= "Angular-touch.js" type= "Text/javascript" ></script>
<style>
Body
{
font-family: ' Roboto ', Sans-serif;
}
. LBT
{
Overflow:hidden;
width:100%;
position:relative;
}
Ul
{
White-space:nowrap;
padding-left:0;
List-style:none;
}
UL Li
{
Display:inline-block;
position:relative;
}
UL Li img
{
Display:block;
width:100%;
height:100%;
}
UL Li label
{
Position:absolute;
bottom:10px;
left:10px;
Color:white;
Background-color:black;
opacity:0.8;
border-radius:3px;
padding:5px;
}
Ul.lbtul
{
position:relative;
Transition:1s left;
left:0;
margin:0;
height:120px;
}
Ul.lbtul Li
{
Float:left;
}
Ul.lbtnav
{
Float:right;
}
Ul.lbtnav Li
{
margin-right:10px;
border:1px solid #696565;
width:10px;
height:10px;
border-radius:5px;
}
Ul.lbtnav li.selected
{
Background-color: #696565;
}
</style>
<body ng-app= "Demo" ng-controller= "Democontroller" >
<div ng-model= "Data" Rn-stepper class= "LBT" >
</div>
<div id= "LABSM" >
</div>
</body>
<script>
Angular.module (' demo ', ["Ngtouch"]). Controller (' Democontroller ', function ($scope) {
$scope. Data = [
{src: "http://17haidai.cn/asd/bigType/354.jpg", Desp: "Hong Kong, Macao and Taiwan"},
{src: "http://17haidai.cn/asd/bigType/288.jpg", Desp: "Thailand"},
{src: "http://17haidai.cn/asd/bigType/156.jpg", Desp: "United States"},
{src: "http://17haidai.cn/asd/bigType/175.jpg", Desp: "UK"},
{src: "http://17haidai.cn/asd/bigType/176.jpg", Desp: "Germany"},
{src: "http://17haidai.cn/asd/bigType/177.jpg", Desp: "Italy"},
{src: "http://17haidai.cn/asd/bigType/178.jpg", Desp: "France"},
];
})
. directive (' Rnstepper ', function () {
return {
Restrict: ' AE ',
Require: ' Ngmodel ',
Scope: {},
Template: ' <ul class= ' Lbtul "ng-style=" {width:ulsumwidth} "ng-touchmove=" Touchfunction ($event) "ng-touchstart=" Touchfunction ($event) "ng-touchend=" Touchfunction ($event) ">" +
' <li ng-repeat= ' one in Data ' ng-style= ' {width:width} ' ><label>{{ One.desp}}</label></li> ' +
' </ul> ' +
' <ul class= ' Lbtnav "><li ng-repeat=" one in DataMember "ng-click=" qhimg () "></li></ul>",
Link:function (Scope, ielement, Iattrs, Ngmodelcontroller) {
Scope.nowpage = 1; Current picture Index
scope.maxpage = 0; Total data length
scope.ulsumwidth = 0; Picture ul Total width
Scope.width = Document.body.offsetWidth; Current screen width
Ngmodelcontroller. $render = function () {
Scope. Data = Ngmodelcontroller. $viewValue; Data source
Scope. DataMember = Json.parse (json.stringify (scope. Data)); Paging Data source
var lastdata = Json.parse (json.stringify (scope. Data[scope. DATA.LENGTH-1]));
var fistdata = Json.parse (json.stringify (scope. Data[0]));
Scope. Data.unshift (Lastdata);
Scope. Data.push (Fistdata);
Scope.maxpage = scope. Data.length; Total data length
Scope.ulsumwidth = Scope.maxpage * scope.width; Picture ul Total width
At the beginning of the installation of the UL rolling speed of 0s, because the first picture to be shown, and then modified to 1s
Ielement.find ("ul") [0].style.transition = "0s left";
Ielement.find ("ul") [0].style.left =-(Scope.nowpage * scope.width);
SetTimeout (function () {
Ielement.find ("ul") [0].style.transition = "1s left";
}, 2000);
Set the first picture to the selected state
SetTimeout (function () {
Ielement.find ("ul") [1].children[0].classname = "selected";
scope.liselected = Ielement.find ("ul") [1].children[0];
}, 100);
Timed scrolling Pictures
Scope. Lbinvert = setinterval (function () {
Scope. Invert_rollimg ();
}, 2000);
};
scope.qhimg = function () {
Ielement.find ("ul") [0].style.transition = "1s left";
var sumz = this. $index * scope.width;
Ielement.find ("ul") [0].style.left =-((this. $index + 1) * scope.width) + "px";
Scope.nowpage = this. $index;
if (scope.liselected)
Scope.liSelected.className = "";
Ielement.find ("ul") [1].children[scope.nowpage].classname = "selected";
scope.liselected = Ielement.find ("ul") [1].children[scope.nowpage];
Scope.nowpage = scope.nowpage + 1;
Clearinterval (scope. Lbinvert);
Scope. Lbinvert = setinterval (function () {
Scope. Invert_rollimg ();
}, 2000);
}
Scope.touchfunction = function (event) {
document.getElementById ("LABSM"). InnerHTML = Event.type;
Switch (event.type) {
Case "Touchstart":
Scope. X = Event.touches[0].clientx;
Clearinterval (scope. Lbinvert);
Ielement.find ("ul") [0].style.transition = "Inherit";
if (scope.nowpage = = 1)
Ielement.find ("ul") [0].style.left =-(Scope.nowpage * scope.width) + "px";
else if (scope.nowpage = = scope.maxpage-2)
Ielement.find ("ul") [0].style.left =-(Scope.nowpage * scope.width) + "px";
Scope. left = parseint (Ielement.find ("ul") [0].style.left.replace ("px", "") | | 0);
Break
Case "Touchmove":
if (Event.touches.length > 0) {
var MoveX = 0;
Scope.touchmovex = Event.touches[0].clientx;
if (Event.touches[0].clientx > scope. X) {
MoveX = scope. X-event.touches[0].clientx;
MoveX = scope. Left-movex;
Scope.trun = "right";
}
else {
MoveX = scope. X-event.touches[0].clientx;
MoveX = scope. Left +-movex;
Scope.trun = "Left";
}
Ielement.find ("ul") [0].style.left = MoveX;
Scope.movex = MoveX;
}
Break
Case "Touchend":
Ielement.find ("ul") [0].style.transition = "1s left";
Scope. Lbinvert = setinterval (function () {
Scope. Invert_rollimg ();
}, 2000);
if (Math.Abs (Scope.touchmovex-scope. X) < SCOPE.WIDTH/3) {
Ielement.find ("ul") [0].style.left =-(Scope.nowpage * scope.width) + "px";
Return
}
Scope.nowpage = Scope.trun = = "Left"? Scope.nowpage + 1:scope.nowpage-1;
var booltrue = false;
if (Scope.nowpage > Scope.maxpage-2) {
Ielement.find ("ul") [0].style.left =-(Scope.nowpage * scope.width) + "px";
Scope.nowpage = 1;
Booltrue = true;
}
else if (scope.nowpage <= 0) {
Ielement.find ("ul") [0].style.left = "0px";
Scope.nowpage = scope.maxpage-2;
Booltrue = true;
}
if (scope.liselected)
Scope.liSelected.className = "";
Ielement.find ("ul") [1].children[scope.nowpage-1].classname = "selected";
scope.liselected = Ielement.find ("ul") [1].children[scope.nowpage-1];
if (!booltrue)
Ielement.find ("ul") [0].style.left =-(Scope.nowpage * scope.width) + "px";
Break
}
}
Timed scrolling Pictures
Scope. invert_rollimg = function () {
Scope.width = Scope.width;
Ielement.find ("ul") [0].style.left =-((Ielement.find ("ul") [0].style.left = = "0px"? 1: (Scope.nowpage + 1)) * Scope.width ) + "px";
if (scope.nowpage >= scope.maxpage-2) {
scope.nowpage = 0;
SetTimeout (function () {
Ielement.find ("ul") [0].style.transition = "0s left";
Ielement.find ("ul") [0].style.left =-(1 * scope.width) + "px";
}, 1000);
Clearinterval (scope. Lbinvert);
Scope. Lbinvert = setinterval (function () {
Ielement.find ("ul") [0].style.transition = "1s left";
Scope. Invert_rollimg ();
}, 2000);
}
Scope.nowpage = scope.nowpage + 1;
if (scope.liselected)
Scope.liSelected.className = "";
Ielement.find ("ul") [1].children[scope.nowpage-1].classname = "selected";
scope.liselected = Ielement.find ("ul") [1].children[scope.nowpage-1];
}
}
};
});
</script>
Handwritten angular carousel diagram (mobile-side seamless version)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
