jquery实现同时展示多个tab标签+左右箭头实现来回滚动（美化版增加删除按钮）
闲聊
前段时间小颖分享了：jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章，引入项目后，我们的组长说样子太丑了，小颖觉得还好啊，要不大家评评理，看下丑不丑？无图无真相，来上图：
看吧其实不丑对不对？嘻嘻，那看完旧版本的来看看新的：
其实 这个js还是调用之前的jquery.gallery.js不过小颖根据新的页面做了一些改变，之前是通过改变ul 元素的 left，实现左右滑动的，现在是通过改变 ul 元素的 margin-left。废话不多说，我们一起来看看改了之后得效果图吧：
这下好看多了吧嘻嘻，接下来小颖给大家上代码：
代码
目录还是没变：
index.html：
<!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>
jquery.gallery.js
(function ($) {
$.fn.extend({
"gallery": function (options) {
if (!isValid(options))
return this;
opts = $.extend({}, defaults, options);
return this.each(function () {
var $this = $(this);
var liNum = $this.children("." + opts.galleryClass).find("li").length; //图片总张数
var galleryWidth = $this.children("." + opts.galleryClass).width(); //展示图片部分宽度
var liWidth = $this.children("." + opts.galleryClass).find("li").width(); //每张图片的宽度
$this.prepend("<a class='prev roll-nav roll-nav-left'><span class='fa fa-backward'></span></a>");
$this.append("<a class='next roll-nav roll-nav-right'><span class='fa fa-forward'></span></a>");
assignImgWidth = parseInt(liWidth) + 5; //给每张图片分配的宽度
$this.find("li").css({'margin-right': 3 + "px"});
var ulWidth = liNum * (liWidth + 5); //ul的总宽度
$this.find("ul").width(ulWidth);
hiddenWidth = ulWidth - galleryWidth; //超出图片显示部分的宽度
if (opts.bindE) {
bindEvent($this, 0);
}
});
}
});
var opts, assignImgWidth, hiddenWidth;
var defaults = {
duration: 500, //单张图片轮播持续时间
interval: 5000, //图片轮播结束到下一张图片轮播开始间隔时间
galleryClass: "gallery" //画廊class
};
function isValid(options) {
return !options || (options && typeof options === "object") ? true : false;
}
function bindEvent($this, t) {
$this.children(".next").click(function () {
rightScroll($this, t);
});
$this.children(".prev").click(function () {
leftScroll($this, t);
});
}
function unbindEvent($this, t) {
$this.children(".next").unbind("click");
$this.children(".prev").unbind("click");
}
function rightScroll($this, t) {
clearTimeout(t);
unbindEvent($this, t);
var left = parseInt($this.find("ul").css("margin-left"));
if (left > -hiddenWidth)
$this.find("ul").animate({'margin-left': "-=" + assignImgWidth + "px"}, opts.duration, function () {
bindEvent($this, t);
});
else
$this.find("ul").animate({}, opts.duration, function () {
bindEvent($this, t);
});
// var t=setTimeout(function(){rightScroll($this,t);},opts.interval+opts.duration);
}
function leftScroll($this, t) {
clearTimeout(t);
unbindEvent($this, t);
var left = parseInt($this.find("ul").css("margin-left"));
if (left < 0)
$this.find("ul").animate({'margin-left': "+=" + assignImgWidth + "px"}, opts.duration, function () {
bindEvent($this, t);
});
else
$this.find("ul").animate({}, opts.duration, function () {
bindEvent($this, t);
});
// var t=setTimeout(function(){rightScroll($this,t);},opts.interval+opts.duration);
}
})(window.jQuery);
master.css
* {
margin:;
padding:;
}
.wrapper {
position: relative;
width: 1050px;
margin: auto;
margin-top: 100px;
height: 42px;
line-height: 40px;
background-color: #f5f3f3;
}
.wrapper .gallery {
margin-left: 46px;
overflow: hidden;
height: 42px;
transition: margin-left 1s;
-moz-transition: margin-left 1s;
-webkit-transition: margin-left 1s;
-o-transition: margin-left 1s;
}
.wrapper .gallery ul {
list-style: none;
padding-left:;
margin-bottom:;
margin-top:;
overflow: hidden;
}
.wrapper .gallery ul.nav-tabs > li {
width: 113px;
float: left;
position: relative;
display: block;
background-color: #e8e5e5;
border: 1px solid #E7E7E7;
}
.wrapper .roll-nav.roll-nav-left {
left:;
}
.wrapper .roll-nav.roll-nav-right {
right:;
}
.wrapper .roll-nav {
position: absolute;
width: 40px;
height: 40px;
text-align: center;
color: #999;
background-color: #e8e5e5;
border: 1px solid #E7E7E7;
z-index:;
top:;
}
.wrapper a.roll-nav:hover {
color: #797979;
background-color: #fff;
}
/*.wrapper a.roll-nav:active, .wrapper a.roll-nav:visited {*/
/*color: #95A0AA;*/
/*}*/
.nav-tabs > li > a {
color: #76838f;
position: relative;
display: block;
padding: 10px 15px;
padding-bottom: 12px;
margin-right:;
line-height: 20px;
cursor: default
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
background-color: #fff;
-webkit-transition-property: background-color, border-bottom;
-webkit-transition-duration: .2s;
-webkit-transition-timing-function: ease;
-moz-transition-property: background-color, border-bottom;
-moz-transition-duration: .2s;
-moz-transition-timing-function: ease;
-o-transition-property: background-color, border-bottom;
-o-transition-duration: .2s;
-o-transition-timing-function: ease;
}
.nav > li > a:focus, .nav > li > a:hover {
background-color: #fff;
}
参考
css参考：Bootstrap多功能自定义选项卡插件
打赏打赏：
jquery实现同时展示多个tab标签+左右箭头实现来回滚动（美化版增加删除按钮）的更多相关文章
- jquery实现同时展示多个tab标签+左右箭头实现来回滚动
内容: jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件 jquery实现同时展示多个tab标签+左右箭头实现来回滚动 小颖最近的项目要实现类似如下效果: 蓝色框圈起来的分别是向上翻. ...
- vant中tab标签切换时会改变内容滚动高度
vant的tabs标签页,标签切换时会改变内容区的滚动高度,这是因为内容区共用同一个父元素为滚动区域引起的,解决办法:在tabs的内容区域嵌套一层滚动区域,让每个内容区域使用单独的滚动元素就行了. ...
- jquery插件之tab标签页或滑动门
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...
- Jquery LigerUI框架学习（二）之Tree于Tab标签实现iframe功能
LigerUI框架Tree于Tab标签动态使用,当点击Tree后动态创建Tab标签,和通常用的iframe框架功能类似 Tree中的关键代码 //Tree初始化 $("#tree1" ...
- 如何一行jquery代码写出tab标签页（链式操作）
啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...
- jquery切换tab标签例子
之前做了一个简单的小效果,使用jquery方式,让tab标签切换,效果如下 代码其实很简单,首先先把代码分享给大家,代码如下 var shoptoggle = $('.shoptoggle .shop ...
- jQuery蓝色修边tab标签切换
jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...
- 支持自动切换的tab标签代码札记
html代码如下: <!-- tab标签代码begin --> <div class="tab1" id="tab1"> <div ...
- 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 （转）
原博客地址 :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...
随机推荐
- python实现关键词提取
今天我来弄一个简单的关键词提取的代码 文章内容关键词的提取分为三大步: (1) 分词 (2) 去停用词 (3) 关键词提取 分词方法有很多,我这里就选择常用的结巴jieba分词:去停用词,我用了一个停 ...
- angular学习笔记（2）- 前端开发环境
angular1学习笔记(2)- 前端开发环境 1.代码编辑工具 2.断点调试工具 3.版本管理工具 4.代码合并和混淆工具 5.依赖管理工具 6.单元测试工具 7.集成测试工具 常见的前端开发工具 ...
- leetcode笔记--SUM问题
引用自 http://blog.csdn.net/wangxiaojun911/article/details/18922337,此处仅作为自己参考 1.Two SUM Given an array ...
- GMA Round 1 简单的线性规划
传送门 简单的线性规划 已知D(x,y)满足$\left\{\begin{matrix}x>-3\\ y>1\\ x+y<12\end{matrix}\right.$ 求$\frac ...
- 转: 关于CAS cpu锁的技术说明。
写的不错.原文链接如下: https://blog.csdn.net/dviewer/article/details/51943140 部分摘要: 2016年07月18日 16:30:08 阅读数:3 ...
- Android 解压zip文件你知道多少？
对于Android常用的压缩格式ZIP,你了解多少? Android的有两种解压ZIP的方法,你知道吗? ZipFile和ZipInputStream的解压效率,你对比过吗? 带着以上问题,现在就开始 ...
- 先打11.2.0.3.8这个PSU，后建库
SQL> alter session set nls_date_format='yyyy-mm-dd hh24:mi:ss'; Session altered. SQL> select c ...
- 说说Python编码规范
前言 已有近两个月没有发表过文章了,前段时间外甥和女儿过来这边渡暑假,平常晚上和周末时间都陪着她们了,趁这个周末有空,再抽空再把这块拾起来. 这么久没写了,再次拿起键盘,想想,发表些什 ...
- 使用viewport中的vm来适配移动端页面
前言 作为一个小前端,经常要和H5打交道,这就面临着不同终端的适配问题. Flexible方案通过Hack手段来根据设备的dpr值相应改变<meta>标签中viewport的值,给我更贴切 ...
- 每天进步一点点——mysql——mysqlbinlog
一. 简单介绍 mysqlbinlog:用于查看server生成的二进制日志的工具. 二. 命令格式 mysqlbinlog 选项日志文件1 三. 经常使用參数 ...