本来想用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 自定义轮播图(汉字导航)的更多相关文章

  1. 【自定义轮播图】微信小程序自定义轮播图无缝滚动

    先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...

  2. 带轮播图、导航栏、商品的简单html,以及轮播图下边数字随轮播图的改变而改变

    ---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...

  3. vue自定义轮播图组件 swiper

    1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...

  4. taro 自定义 轮播图组件

    1.代码 components/MySwiper/index.js /** * 轮播图组件 */ import Taro, { Component } from '@tarojs/taro'; imp ...

  5. BootStrap自定义轮播图播放速度

    $('.carousel').carousel({      interval: 3000 });

  6. 前台主页搭建、后台主页轮播图接口设计、跨域问题详解、前后端互通、后端自定义配置、git软件的初步介绍

    今日内容概要 前台主页 后台主页轮播图接口 跨域问题详解 前后端打通 后端自定义配置 git介绍和安装 内容详细 1.前台主页 Homeviwe.vue <template> <di ...

  7. swift-自定义无限轮播图

    一  前言 1.之前一直在用OC编程,最近才开始接触使用swift就发现使用OC越来越不习惯,感觉已经爱上了swift. 2.这个自定义轮播图只是对之前OC版本进行了翻译,欢迎指正. 3.我决定一步步 ...

  8. Android开发之ViewPager实现轮播图(轮播广告)效果的自定义View

    最近开发中需要做一个类似京东首页那样的广告轮播效果,于是采用ViewPager自己自定义了一个轮播图效果的View. 主要原理就是利用定时任务器定时切换ViewPager的页面. 效果图如下: 主页面 ...

  9. android ViewPager实现的轮播图广告自定义视图,网络获取图片和数据

    public class SlideShowAdView extends FrameLayout { //轮播图图片数量    private static int IMAGE_COUNT = 3;  ...

随机推荐

  1. 手动爬虫之京东笔记本栏(ptyhon3)

    import urllib.request as ur import urllib.error as ue import re # 目标网址 url = 'https://list.jd.com/li ...

  2. sql---字段类型转换,sql获取当前时间

    一.字段类型转换 convert(要转换成的数据类型,字段名称)例如 convert(varchar(100),col_name)Convert(int,Order_no) 二.sql获取当前时间 s ...

  3. MYSQ无法启动

    http://bbs.51cto.com/thread-433491-1.html http://www.linuxdiyf.com/viewarticle.php?id=97065 http://b ...

  4. event.preventDefault(); Please enter your name using lowercase letters only.

    w 可以用于移动实际项目. 输入 android qq输入法 输入第一个字符“中”后 w PC 点击enter键13 空格键32 w 没有阻挡中午输入. CODE <!DOCTYPE html& ...

  5. gerrit添加appkey以及简单添加分支

    最近团队开放用上gerrit版本项目管理工具,简单说一下appkey配置过程 首先是拿到gerrit分配的账户密码.然后进入到首页,假如是新搭建的应该是没有信息,我这里有一些提交的信息,然后找到右上角 ...

  6. .net 存储过程中的 output参数取值问题

    当存储过程中多个结果需要返回时经常需要用到output类型的参数,如果存储过程没有返回结果集只是输出output类型参数时使用如下代码: db.AddOutParameter(dbCmd, " ...

  7. 笔记-django学习链接

    form表单学习 https://www.cnblogs.com/weiman3389/p/6225075.html python字符串replace()方法 https://www.cnblogs. ...

  8. 003-mysql查询表的数据大小

    在需要备份数据库里面的数据时,我们需要知道数据库占用了多少磁盘大小,可以通过一些sql语句查询到整个数据库的容量,也可以单独查看表所占容量. 1.查看数据库表结构大小,要查询表所占的容量,就是把表的数 ...

  9. java架构师之路:推荐的15本书

    作为Java程序员来说,最痛苦的事情莫过于可以选择的范围太广,可以读的书太多,往往容易无所适从.我想就我自己读过的技术书籍中挑选出来一些,按照学习的先后顺序,推荐给大家,特别是那些想不断提高自己技术水 ...

  10. 用仿ActionScript的语法来编写html5——第三篇,鼠标事件与游戏人物移动

    第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...