ANGULARJS1 Making Custom Carousel maps (Kanji navigation)

Originally wanted to use Swiper plug-in, but demand actually said to Chinese characters when navigation bar This is no way, can only write their own.

directive

//Custom directives: Carousel Diagram on home pageApp.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)}" ></li> ' + ' </ul><ul class= ' swiper-pagination "><li class=" Pagination-item "ng-repeat=" item in TabList "Ng-mouseo Ver= "Hovertab ($index)" ng-mouseleave= "Leavetab ($index)" ng-class= "{imgactive:isselimg (item)}" >{{Item.name}} </li></ul></div> ', Link:function($scope, Elem, attr) {vari = 0; varImginterval; $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:1;width:100%;Height:100%;}. Swiper-wrapper{Height:200px;width:100%;}. Swiper-wrapper-items{Height:100%;position:Absolute;width:100%;Opacity:0;transition:opacity. 8s;-moz-transition:opacity. 8s;-webkit-transition:opacity. 8s;-o-transition:opacity. 8s;}. Imgactive.swiper-wrapper-items{Opacity:1;}. 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:0; Right:0;text-align:Center;Z-index: A;}. 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:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;Flex:1;-webkit-user-select:None;/*Chrome All/safari all/opera15+*/-moz-user-select:None;/*Firefox All*/-ms-user-select:None;/*IE + +*/User-select:None;cursor:Pointer;Color:#fff;padding:10px;transition:All . 8s;-moz-transition:All . 8s;-webkit-transition:All . 8s;-o-transition:All . 8s;}

Reference

<img-list= "Imglist"  tab-list= "tabList"  AutoPlay = "AutoPlay" ></ swiper-img >

Controller

$scope. tabList = [{id:0, Name: "Pioneering and innovative"}, {id:1, Name: "Efficient and Pragmatic"}, {id:2, Name: "Customer Benefit"}, {id:3, Name: "Achievement Employee" }];         = [{id:0, src: "@Url. Content (" ~/content/images/u3.jpg ")"}, {id:1, src: "@Url. Content (" ~/content/images/bg1 . png ")" },            2, src: "@Url. Content (" ~/content/images/bg2.png ")"}, {id:3, src: "@Url. Content (" ~/content/ Images/bg3.png ")" }];         = 5000;

TabList is the Chinese character navigation bar

Imglist is an array of image links

AutoPlay is the switching time

All right, it's done.

ANGULARJS1 Making Custom Carousel maps (Kanji navigation)