前段时间小颖分享了：jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章，引入项目后，我们的组长说样子太丑了，小颖觉得还好啊，要不大家评评理，看下丑不丑？无图无真相，来上图：
看吧起始不丑对不对？嘻嘻，那看完旧版本的来看看新的：
其实 这个js还是调用之前的jquery.gallery.js不过小颖根据新的页面做了一些改变，之前是通过改变ul 元素的 left，实现左右滑动的，现在是通过改变 ul 元素的 margin-left。废话不多说，我们一起来看看改了之后得效果图吧：
这下好看多了吧嘻嘻，接下来小颖给大家上代码：
代码目录还是没变：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="css/master.css" rel="stylesheet"/> <link href="css/font-awesome.min.css" rel="stylesheet"/> <script src="js/jquery-1.8.2.js"></script> <script src="js/jquery.gallery.js"></script> <script src="js/angular.js" charset="utf-8"></script> <script> jQuery(function () { var options = { //所有属性都可选 duration: 500, //单张图片轮播持续时间 interval: 5000, //图片轮播结束到下一张图片轮播开始间隔时间 galleryClass: "gallery", //画廊class bindE: true } $(".wrapper").gallery(options); }); let mod = angular.module('test', []); mod.controller('main', function ($scope) { $scope.ceshi = [{ id: 1, name: '系统首页', isSelect: false }, { id: 2, name: '客户信息', isSelect: false }, { id: 3, name: '客户信2', isSelect: false }, { id: 4, name: '客户信3', isSelect: false }, { id: 5, name: '客户信4', isSelect: false }, { id: 6, name: '系统首2', isSelect: false }, { id: 7, name: '客户信5', isSelect: false }, { id: 8, name: '客户信6', isSelect: false }, { id: 9, name: '客户信7', isSelect: false }, { id: 10, name: '系统首3', isSelect: false }, { id: 11, name: '客户信8', isSelect: false }, { id: 12, name: '客户信9', isSelect: false }, { id: 13, name: '客户信1', isSelect: false }, { id: 14, name: '客户信2', isSelect: false }, { id: 15, name: '系统首3', isSelect: false }, { id: 16, name: '客户信4', isSelect: false }, { id: 17, name: '客户信5', isSelect: false }]; $scope.closeFun = function (index) { $scope.ceshi.splice(index, 1); var left = parseInt($("div.gallery>ul").css("margin-left")); if (left <= -(parseInt(liWidth) + 5)) { $('div.gallery').find("ul").animate({'margin-left': "+=" + (parseInt(liWidth) + 5) + "px"}, 500); } var options = { //所有属性都可选 duration: 500, //单张图片轮播持续时间 interval: 5000, //图片轮播结束到下一张图片轮播开始间隔时间 galleryClass: "gallery", //画廊class bindE: false//是否触发bindEvent事件 } $(".wrapper").gallery(options); } $scope.selectFun = function (index) { $scope.ceshi.forEach(function (item) { item.isSelect = false; }); $scope.ceshi[index].isSelect = true; } }); </script> </head> <body ng-app="test"> <div class="wrapper" ng-controller="main"> <div class="gallery"> <ul class="nav nav-tabs"> <li ng-repeat="names in ceshi" ng-click="selectFun($index)" ng-class="{true:'active',false:''}[names.isSelect]"> <a> <span>{{names.name}}</span> <i class="fa fa-close" ng-click="closeFun($index)"></i></a> </li> </ul> </div> </div> </body> </html>