angularjs1 自定义轮播图(汉字导航)
本来想用swiper插件的,可是需求居然说要汉字当导航栏这就没办法了,只能自己写。
directive
// 自定义指令: Home页面的轮播图
app.directive('swiperImg', ["$interval", function ($interval) {
return {
restrict: 'E',
replace: true,
scope: { imgList: "=", tabList: "=", autoplay : "="},
template: '<div class="swiper-container"><ul class="swiper-wrapper" >' +
'<li class="swiper-wrapper-items" ng-repeat="item in imgList" ng-class="{ imgActive : isSelImg(item) }"><img ng-src="{{item.src}}" /></li>' +
'</ul><ul class="swiper-pagination"><li class="pagination-item" ng-repeat="item in tabList" ng-mouseover="hoverTab($index)" ng-mouseleave="leaveTab($index)" ng-class="{ imgActive : isSelImg(item) }">{{ item.name }}</li></ul></div>',
link: function ($scope, elem, attr) {
var i = 0;
var imgInterval;
$scope.hoverTab = function (index) {
$scope.hoverImg = index;
$scope.isSelImg(index);
i = index;
$interval.cancel(imgInterval);
}
$scope.leaveTab = function (index) {
imgInterval = $interval(function () {
if (i == $scope.imgList.length) {
i = 0;
}
$scope.hoverImg = i;
$scope.isSelImg(i);
i++;
}, $scope.autoplay);
}
imgInterval = $interval(function () {
if (i > 3) {
i = 0;
}
$scope.hoverImg = i;
$scope.isSelImg(i);
i++;
}, $scope.autoplay);
$scope.isSelImg = function (item) {
return $scope.hoverImg == item.id;
}
$scope.hoverImg = i;
$scope.isSelImg(i);
}
};
}]);
CSS
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
z-index:;
width: 100%;
height: 100%;
}
.swiper-wrapper{
height: 200px;
width: 100%;
}
.swiper-wrapper-items {
height: 100%;
position: absolute;
width: 100%;
opacity:;
transition: opacity .8s;
-moz-transition: opacity .8s;
-webkit-transition: opacity .8s;
-o-transition: opacity .8s;
}
.imgActive.swiper-wrapper-items {
opacity:;
}
.swiper-container img {
width: 100%;
height: 100%;
} .swiper-pagination {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
bottom: 0 !important;
position: absolute;
left:;
right:;
text-align: center;
z-index:;
} .pagination-item:first-child {
background-color: rgba(60,141,188,0.5);
} .pagination-item:nth-child(2) {
background-color: rgba(202,64,64,0.5);
} .pagination-item:nth-child(3) {
background-color: rgba(255,134,4,0.5);
} .pagination-item:last-child {
background-color: rgba(34,172,56,0.5);
}
.imgActive.pagination-item:first-child {
background-color: rgba(60,141,188,1);
}
.imgActive.pagination-item:nth-child(2) {
background-color: rgba(202,64,64,1);
}
.imgActive.pagination-item:nth-child(3) {
background-color: rgba(255,134,4,1);
}
.imgActive.pagination-item:last-child {
background-color: rgba(34,172,56,1);
}
.pagination-item {
-webkit-box-flex:;
-moz-box-flex:;
-webkit-flex:;
-ms-flex:;
flex:;
-webkit-user-select: none; /* Chrome all / Safari all /opera15+*/
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
user-select: none;
cursor: pointer;
color: #fff;
padding: 10px;
transition: all .8s;
-moz-transition: all .8s;
-webkit-transition: all .8s;
-o-transition: all .8s;
}
引用
<swiper-img img-list="imgList" tab-list="tabList" autoplay="autoplay"></swiper-img>
控制器
$scope.tabList = [{ id: 0, name: "开拓创新" }, { id: 1, name: "高效务实" }, { id: 2, name: "利益客户" }, { id: 3, name: "成就员工" }];
$scope.imgList = [{ id: 0, src: "@Url.Content("~/Content/images/u3.jpg")" }, { id: 1, src: "@Url.Content("~/Content/images/bg1.png")" },
{ id: 2, src: "@Url.Content("~/Content/images/bg2.png")" }, { id: 3, src: "@Url.Content("~/Content/images/bg3.png")" }];
$scope.autoplay = 5000;
tabList 是汉字导航栏
imgList 是图片链接数组
autoplay 是切换时间
效果图
好的,完成了。
angularjs1 自定义轮播图(汉字导航)的更多相关文章
- 【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
- 带轮播图、导航栏、商品的简单html,以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
- vue自定义轮播图组件 swiper
1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...
- taro 自定义 轮播图组件
1.代码 components/MySwiper/index.js /** * 轮播图组件 */ import Taro, { Component } from '@tarojs/taro'; imp ...
- BootStrap自定义轮播图播放速度
$('.carousel').carousel({ interval: 3000 });
- 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍
今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...
- swift-自定义无限轮播图
一 前言 1.之前一直在用OC编程,最近才开始接触使用swift就发现使用OC越来越不习惯,感觉已经爱上了swift. 2.这个自定义轮播图只是对之前OC版本进行了翻译,欢迎指正. 3.我决定一步步 ...
- Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View
最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面 ...
- android ViewPager实现的轮播图广告自定义视图,网络获取图片和数据
public class SlideShowAdView extends FrameLayout { //轮播图图片数量 private static int IMAGE_COUNT = 3; ...
随机推荐
- 手动爬虫之京东笔记本栏(ptyhon3)
import urllib.request as ur import urllib.error as ue import re # 目标网址 url = 'https://list.jd.com/li ...
- sql---字段类型转换,sql获取当前时间
一.字段类型转换 convert(要转换成的数据类型,字段名称)例如 convert(varchar(100),col_name)Convert(int,Order_no) 二.sql获取当前时间 s ...
- MYSQ无法启动
http://bbs.51cto.com/thread-433491-1.html http://www.linuxdiyf.com/viewarticle.php?id=97065 http://b ...
- event.preventDefault(); Please enter your name using lowercase letters only.
w 可以用于移动实际项目. 输入 android qq输入法 输入第一个字符“中”后 w PC 点击enter键13 空格键32 w 没有阻挡中午输入. CODE <!DOCTYPE html& ...
- gerrit添加appkey以及简单添加分支
最近团队开放用上gerrit版本项目管理工具,简单说一下appkey配置过程 首先是拿到gerrit分配的账户密码.然后进入到首页,假如是新搭建的应该是没有信息,我这里有一些提交的信息,然后找到右上角 ...
- .net 存储过程中的 output参数取值问题
当存储过程中多个结果需要返回时经常需要用到output类型的参数,如果存储过程没有返回结果集只是输出output类型参数时使用如下代码: db.AddOutParameter(dbCmd, " ...
- 笔记-django学习链接
form表单学习 https://www.cnblogs.com/weiman3389/p/6225075.html python字符串replace()方法 https://www.cnblogs. ...
- 003-mysql查询表的数据大小
在需要备份数据库里面的数据时,我们需要知道数据库占用了多少磁盘大小,可以通过一些sql语句查询到整个数据库的容量,也可以单独查看表所占容量. 1.查看数据库表结构大小,要查询表所占的容量,就是把表的数 ...
- java架构师之路:推荐的15本书
作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多,往往容易无所适从.我想就我自己读过的技术书籍中挑选出来一些,按照学习的先后顺序,推荐给大家,特别是那些想不断提高自己技术水 ...
- 用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动
第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...