手写angular轮播图（手机端无缝版）

最新推荐文章于 2024-07-08 19:08:19 发布
最新推荐文章于 2024-07-08 19:08:19 发布
阅读量173 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/fxnet/p/5910268.html
版权

代码地址：

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

<html>
<head>
<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>
</head>
<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: "港澳台" },
{ src: "http://17haidai.cn/asd/bigType/288.jpg", desp: "泰国" },
{ src: "http://17haidai.cn/asd/bigType/156.jpg", desp: "美国" },
{ src: "http://17haidai.cn/asd/bigType/175.jpg", desp: "英国" },
{ src: "http://17haidai.cn/asd/bigType/176.jpg", desp: "德国" },
{ src: "http://17haidai.cn/asd/bigType/177.jpg", desp: "意大利" },
{ src: "http://17haidai.cn/asd/bigType/178.jpg", desp: "法国" },
];
})
.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}"><img ng-src="{{ one.src }}"/><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; //当前图片索引
scope.maxPage = 0; //数据总长度
scope.ulSumWidth = 0; //图片ul总宽度
scope.width = document.body.offsetWidth; //当前屏幕宽度
ngModelController.$render = function () {
scope.Data = ngModelController.$viewValue; //数据源
scope.DataMember = JSON.parse(JSON.stringify(scope.Data)); //分页数据源
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; //数据总长度
scope.ulSumWidth = scope.maxPage * scope.width; //图片ul总宽度
//刚开始设置ul的滚动速度为0s，因为要先把第一张图片展示出来，然后再修改为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);
//设置第一张图片为选中状态
setTimeout(function () {
iElement.find("ul")[1].children[0].className = "selected";
scope.liSelected = iElement.find("ul")[1].children[0];
}, 100);
//定时滚动图片
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;
}
}

//定时滚动图片
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>
</html>

转载于:https://www.cnblogs.com/fxnet/p/5910268.html

weixin_30472035
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AngularJS实现轮播图
知识中转站
01-11 7150
AngularJS carousel .carousel-indicators li{ margin-left: 5px; margin-right: 5px; }
angularjs 轮播图
qq_33182945的博客
01-11 2386
Carousel                                                                 Slide {{$index}}               {{slide.text}}                                                 Add Slide  
angular中的无缝向上滚动效果
zyh2525246的博客
06-30 1160
html代码如下： <div class="slide"> <ul class="slide-ul"> <demo-slide-follow id="slide1" dataset-data = "data"></demo-slide-follow> </ul> </div> css代码如下： .slide{ height:60px; overflow:hidden; } js代码如下： $scope.data= [{
基于Angular-animate.js和css实现的轮播图
的博客
11-10 4628
最近在学习angularJS和foundation进行前端开发, 需要一款轮播图.简单做了一个,能够进行无缝轮播,带有滑动效果,点击上/下一张时从新开始定时器轮播的功能. 首先进行外部文件的引用: 设置CSS样式: .mydiv{ position: relative; width: 100%; height: 370px; background-col
Angular2利用组件与指令实现图片轮播组件
08-31
在本篇内容中，我们将探讨如何利用Angular2的组件和指令来实现一个图片轮播组件。 首先，创建组件是实现轮播的基础。`SlideImgComponent`是我们要创建的组件，它将用于展示轮播图片。在Angular中，我们使用`@...
Ionic + Angular.js实现图片轮播的方法示例
10-19
本文将介绍如何使用Ionic框架结合Angular.js实现一个图片轮播功能。Ionic是一款基于Angular.js构建混合移动应用的框架，它提供了丰富的组件，包括图片轮播（ion-slides）。 首先，我们需要创建一个新的页面来承载...
简单实现AngularJS轮播图效果
12-09
在本文中，我们将探讨如何使用AngularJS来创建一个轮播图效果。AngularJS是一个强大的JavaScript框架，用于构建动态Web应用程序。结合Bootstrap库，我们可以轻松地实现轮播组件，这是一个常见的功能，用于展示多张...
详解如何将angular-ui的图片轮播组件封装成一个指令
12-11
在本文中，我们将深入探讨如何将AngularJS中的Angular-UI Bootstrap图片轮播组件封装成一个可复用的自定义指令。这个过程可以帮助我们避免在多个项目中重复编写相同的轮播功能，提高代码的复用性和可维护性。 首先...
angularjs实现首页轮播图效果
10-20
主要为大家详细介绍了angularjs实现首页轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Angular(移动端)中使用轮播插件swiper4
qq_43579525的博客
11-16 1073
项目使用的Angular7.0和swiper4 1.安装Swiper： （自己使用cnpm命令安装竟然在node_modules文件夹下找不到swiper,使用npm命令则可以,这是why?） npm install swiper --save 在angular.json文件添加swiper.js和swiper.css &quot;architect&quot;: { ............... ...
AngularJs实现轮播图
Smile李先生
01-11 2946
AngularJS carousel                                                                                                             Slide {{$index}}                         {{slide.text
Angular自定义指令集成swiper插件实现轮播图
车联网开发的博客
12-29 1030
从开始接触Angular至今已经近半年时间，已经基本上熟悉了angular的语法规范和用法。我认为angular最重要的部分还是用自定义指令来封装自己想用的组件。这也正所谓得自定义指令者得angular，可见自定义指令在angular中的地位是何等的高。 效果图 自定义指令实现轮播图 1.swiper插件的使用在上一篇博客中已经阐述，这里就不再多说； 2.使用angular必须首先引入a...
angularjs指令实现轮播图----swiper
weixin_30607659的博客
08-15 182
'use strict'; angular.module('app').directive('swipersLbt',swipers); swipers.$inject = ['$timeout']; function swipers($timeout) { return { restri...
Angular2组件与指令的小实践——实现一个图片轮播组件
weixin_30270561的博客
02-21 241
如果说模块系统是Angular2的灵魂，那其组件体系就是其躯体，在模块的支持下渲染出所有用户直接看得见的东西，一个项目最表层的东西就是组件呈现的视图。而除了直接看的见的躯体之外，一个完整的“生物”还需要有感觉器官，用来感知外界与其的交互，这就是指令要做的事情。本文将使用Angular2提供的强大的组件与指令等功能制作出一个简单的图片轮播控件，继续上文打的比方的话这就像是一个“器官”，功能是呈现图片...
h5用swiper结合angularjs实现手机浏览器左右滑动切换图片的效果
crystalu3的博客
01-14 7471
需求：在h5页面中实现多图轮播且在手机浏览器上要可左右滑动切换图片，并显示当且页数/总页数以提示用户。       实现：由于这个功能是上上周做的，已经不记得参考了哪些大神的链接，总之应该是很多个，这里就不一一贴上了，再次感谢所有乐于分享的大神们。下面贴我的实现：       1.1下载swiper        swiper中文网：http://www.swiper.com.cn/ 里面有
angular实现新闻公告滚动和图片轮播
qq_37012533的博客
12-21 2982
新闻公告滚动 //template &amp;lt;div id=&quot;news&quot;&amp;gt; &amp;lt;div id=&quot;scrollBox&quot; [class.scroll_top]=&quot;flag&quot;&amp;gt; &amp;lt;span *ngFor=&quot;let item of notice&quot;&am
angular轮播图
weixin_30652491的博客
03-25 555
还是直接上代码比较好 <!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/animate....
HTTP Client
最新发布
Mr.xing的博客
07-08 615
jdk9开始引入HTTP Client标准化，jdk10开始更新。CompletableFutures提供了非阻塞请求和响应式，java.util.concurrent.Flow API提供流量控制支持，从用户请求发布者和响应订阅者，一直到底层套接字，更容易的跟踪数据流。
angular柱状图
08-25
在Angular中实现柱状图可以使用echarts库来实现。可以通过在HTML页面定义一个具有echarts类和options属性的div元素来创建柱状图。你可以使用echarts提供的api方法来处理交互事件，例如点击柱状图跳转到指定的详情...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值