内容：

小颖最近的项目要实现类似如下效果：

蓝色框圈起来的分别是向上翻、向下翻俩按钮。绿色框分别是用户点击菜单后，出现相应的tab标签，当tab标签太多内容显示不下时，左右两边的按钮就可以实现看后面的tab标签和看之前的tab标签。小颖一开始想使用bootstrap的轮播图 carousel插件，后来发现行不通，就开始问度娘，偶然间发现了别人发表的：jquery同时展示多张图片+定时向左单张滚动+前后箭头插件，小颖将其修修改改后实现了自己想要的功能：jquery实现同时展示多个tab标签+左右箭头实现来回滚动

jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件

这个由于图片太大，小颖就不给大家看效果图了，感兴趣的可以把代码复制下来，自己运行后看下具体的效果图时怎样的。

代码：

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <link href="css/master.css" rel="stylesheet"/>

    <script src="js/jquery-1.8.2.js"></script>

    <script src="js/jquery.gallery.js"></script>

    <script>

        jQuery(function () {

            var options = {  //所有属性都可选

                duration: 500,  //单张图片轮播持续时间

                interval: 5000,  //图片轮播结束到下一张图片轮播开始间隔时间

                showImgNum: 5,  //同时展示的图片数量，此参数最大值=Math.floor(画廊宽度/一张图片宽度)

                galleryClass: "gallery"  //画廊class

            }

            $(".wrapper").gallery(options);

        });

    </script>

</head>

<body>

<div class="wrapper">

    <div class="gallery">

        <ul>

            <li><img src="data:images/1.jpg" width="190" height="190"/></li>

            <li><img src="data:images/2.jpg" width="190" height="190"/></li>

            <li><img src="data:images/3.jpg" width="190" height="190"/></li>

            <li><img src="data:images/4.jpg" width="190" height="190"/></li>

            <li><img src="data:images/5.jpg" width="190" height="190"/></li>

            <li><img src="data:images/6.jpg" width="190" height="190"/></li>

            <li><img src="data:images/7.jpg" width="190" height="190"/></li>

            <li><img src="data:images/8.jpg" width="190" height="190"/></li>

        </ul>

    </div>

</div>

<div class="wrapper">

    <div class="gallery">

        <ul>

            <li><img src="data:images/1.jpg" width="190" height="190"/></li>

            <li><img src="data:images/2.jpg" width="190" height="190"/></li>

            <li><img src="data:images/3.jpg" width="190" height="190"/></li>

            <li><img src="data:images/4.jpg" width="190" height="190"/></li>

            <li><img src="data:images/5.jpg" width="190" height="190"/></li>

            <li><img src="data:images/6.jpg" width="190" height="190"/></li>

            <li><img src="data:images/7.jpg" width="190" height="190"/></li>

            <li><img src="data:images/8.jpg" width="190" height="190"/></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 imgNum = $this.children("." + opts.galleryClass).find("img").length;  //图片总张数

                var galleryWidth = $this.children("." + opts.galleryClass).width();  //展示图片部分宽度

                var imgWidth = $this.children("." + opts.galleryClass).find("img").width();  //每张图片的宽度

                var imgHeight = $this.children("." + opts.galleryClass).find("img").height();  //每张图片的高度

                $this.prepend("<span class='prev'></span>");

                $this.append("<span class='next'></span>");

                var arrowHeight = $this.children("span").height();  //前后箭头的高度

                var arrowTop = (imgHeight - arrowHeight) / 2;  //前后箭头距顶部的距离

                $this.children("span").css({"top": arrowTop + "px"});

                assignImgWidth = galleryWidth / opts.showImgNum;  //给每张图片分配的宽度

                var ulWidth = imgNum * assignImgWidth;  //ul的总宽度

                $this.find("ul").width(ulWidth);

                var imgMarginWidth = (assignImgWidth - imgWidth) / 2;  //每张图片的左右外边距

                $this.find("li").css({margin: "0 " + imgMarginWidth + "px"});

                hiddenWidth = ulWidth - galleryWidth;  //超出图片显示部分的宽度

                var t = setTimeout(function () {

                    rightScroll($this, t);

                }, opts.interval);

                bindEvent($this, t);

            });

        }

    });

    var opts, assignImgWidth, hiddenWidth;

    var defaults = {

        duration: 500,  //单张图片轮播持续时间

        interval: 5000,  //图片轮播结束到下一张图片轮播开始间隔时间

        showImgNum: 5,  //同时展示的图片数量

        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("left"));

        if (left > -hiddenWidth)

            $this.find("ul").animate({left: "-=" + assignImgWidth + "px"}, opts.duration, function () {

                bindEvent($this, t);

            });

        else

            $this.find("ul").animate({left: "0px"}, 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("left"));

        if (left < 0)

            $this.find("ul").animate({left: "+=" + assignImgWidth + "px"}, opts.duration, function () {

                bindEvent($this, t);

            });

        else

            $this.find("ul").animate({left: "-" + hiddenWidth + "px"}, 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:1170px;margin:auto;}

.wrapper .gallery{width:1000px;margin:auto;overflow:hidden;}

.wrapper .gallery ul{position:relative;left:;list-style:none;overflow:hidden;}

.wrapper .gallery ul li{float:left;}

.wrapper .prev{display:inline-block;position:absolute;left:0px;width:30px;height:70px;background:url('../prev.png') no-repeat 0px 0px;cursor:pointer;}

.wrapper .next{display:inline-block;position:absolute;right:0px;width:30px;height:70px;background:url('../next.png') no-repeat 0px 0px;cursor:pointer;}

.wrapper span:hover{background-position:0px -70px;}

所需图片：

next.png prev.png

jquery实现同时展示多个tab标签+左右箭头实现来回滚动

先上效果图：

代码：

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,  //图片轮播结束到下一张图片轮播开始间隔时间

                showImgNum: 10,  //同时展示的图片数量，此参数最大值=Math.floor(画廊宽度/一张图片宽度)

                galleryClass: "gallery"  //画廊class

            }

            $(".wrapper").gallery(options);

        });

        let mod = angular.module('test', []);

        mod.controller('main', function ($scope) {

            $scope.ceshi=[{

                id:1,

                name:'系统首页'

            },{

                id:2,

                name:'客户信息'

            },{

                id:3,

                name:'客户信息2'

            },{

                id:4,

                name:'客户信息3'

            },{

                id:5,

                name:'客户信息4'

            },{

                id:6,

                name:'系统首页2'

            },{

                id:7,

                name:'客户信息5'

            },{

                id:8,

                name:'客户信息6'

            },{

                id:9,

                name:'客户信息7'

            },{

                id:10,

                name:'系统首页3'

            },{

                id:11,

                name:'客户信息8'

            },{

                id:12,

                name:'客户信息9'

            },{

                id:13,

                name:'客户信息1'

            },{

                id:14,

                name:'客户信息2'

            },{

                id:15,

                name:'系统首页3'

            },{

                id:16,

                name:'客户信息4'

            },{

                id:17,

                name:'客户信息5'

            }];

        });

    </script>

</head>

<body ng-app="test">

<div class="wrapper" ng-controller="main">

    <div class="gallery">

        <ul>

            <li ng-repeat="names in ceshi">

                <span style="height: 50px">{{names.name}}</span>

            </li>

        </ul>

    </div>

</div>

</body>

</html>

jquery.gallery.js剩下的angular.js、jquery-1.8.2.js大家可以在网上下载。

(function ($) {

    $.fn.extend({

        "gallery": function (options) {

            if (!isValid(options))

                return this;

            opts = $.extend({}, defaults, options);

            return this.each(function () {

                var $this = $(this);

                var imgNum = $this.children("." + opts.galleryClass).find("span").length;  //图片总张数

                var galleryWidth = $this.children("." + opts.galleryClass).width();  //展示图片部分宽度

                var imgWidth = $this.children("." + opts.galleryClass).find("span").width();  //每张图片的宽度

                var imgHeight = $this.children("." + opts.galleryClass).find("span").height();  //每张图片的高度

                $this.prepend("<span class='prev fa fa-arrow-circle-left'></span>");

                $this.append("<span class='next fa fa-arrow-circle-right'></span>");

                var arrowHeight = $this.children("span").height();  //前后箭头的高度

                var arrowTop = (imgHeight - arrowHeight) / 2;  //前后箭头距顶部的距离

                $this.children("span").css({"top": 0 + "px"});

                assignImgWidth = galleryWidth / opts.showImgNum;  //给每张图片分配的宽度

                var ulWidth = imgNum * assignImgWidth;  //ul的总宽度

                $this.find("ul").width(ulWidth);

                // var imgMarginWidth = (assignImgWidth - imgWidth) / 2;  //每张图片的左右外边距

                $this.find("li").css({'margin-right': 1 + "px"});

                hiddenWidth = ulWidth - galleryWidth;  //超出图片显示部分的宽度

                // var t = setTimeout(function () {

                //     rightScroll($this, t);

                // }, opts.interval);

                // console.log(t);

                bindEvent($this, 0);

            });

        }

    });

    var opts, assignImgWidth, hiddenWidth;

    var defaults = {

        duration: 500,  //单张图片轮播持续时间

        interval: 5000,  //图片轮播结束到下一张图片轮播开始间隔时间

        showImgNum: 5,  //同时展示的图片数量

        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("left"));

        if (left > -hiddenWidth)

            $this.find("ul").animate({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("left"));

        if (left < 0)

            $this.find("ul").animate({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;

}

.wrapper .gallery {

    width: 1000px;

    margin: auto;

    overflow: hidden;

}

.wrapper .gallery ul {

    position: relative;

    left:;

    list-style: none;

    overflow: hidden;

}

.wrapper .gallery ul li {

    text-align: center;

    float: left;

    padding: 0 8px;

    background-color: #ccc;

    border-radius: 2px;

    width: 80px

}

.wrapper .prev,

.wrapper .next {

    display: inline-block;

    position: absolute;

    width: 30px;

    height: 30px;

    cursor: pointer;

    line-height: 25px;

    /*text-align: center;*/

    /*border-radius: 50%;*/

    /*background-color: #d8d4d5;*/

}

.wrapper .prev {

    left: 0px;

}

.wrapper .next {

    right: 0px;

}

.wrapper span:hover {

    background-position: 0px -70px;

}

jquery实现同时展示多个tab标签+左右箭头实现来回滚动的更多相关文章

jquery实现同时展示多个tab标签+左右箭头实现来回滚动（美化版增加删除按钮）
闲聊前段时间小颖分享了: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代码如下:  <div class="tab1" id="tab1"> <div ...
类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签（转）
原博客地址 :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...

随机推荐

quepy
A python framework to transform natural language questions to queries in a database query language. ...
elasticsearch服务安装采坑
笔者这里下载的elastic search,是5.3.0版本,下载地址:https://www.elastic.co/downloads/past-releases/elasticsearch-5-3 ...
Java 将 List 里面的内容写入桌面的 txt 文档
文件内容: /** * 将 list 写入文件中 */ import java.io.BufferedWriter; import java.io.File; import java.io.FileW ...
前端工程化系列[03]-Grunt构建工具的运转机制
在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核 ...
【jvm】windows下查看java进程下多线程的相关信息
微软工具:Process Explorer v15.3 下载地址:http://technet.microsoft.com/en-us/sysinternals/bb896653.aspx 参考教程: ...
两个UITableView的级联菜单
效果源码 https://github.com/YouXianMing/Animations 说明 1. TwoLevelLinkageView封装了两个tableView,左边tableView中 ...
java使用httpclient封装post请求和get的请求
在我们程序员生涯中,经常要复用代码,所以我们应该养成时常整理代码的好习惯,以下是我之前封装的httpclient的post和get请求所用的代码: package com.marco.common; ...
window下zookeeper的下载启动和报错等问题
在使用dubbo等需要用到zookeeper,之前window下本地部署,启动一直有问题,后面折腾了下才部署成功,此次记录下来. 将zookeeper下载之后,解压到指定目录即可,无需安装.例如:解压 ...
Spring Boot系列——7步集成RabbitMQ
RabbitMQ是一种我们经常使用的消息中间件,通过RabbitMQ可以帮助我们实现异步.削峰的目的. 今天这篇,我们来看看Spring Boot是如何集成RabbitMQ,发送消息和消费消息的.同时 ...
mysql 动态增加列，查找表中有多少列，具体什么列。通过JSON生成mysql表支持子JSON
好消息, 程序员专用早餐机.和掌柜说 ideaam,可以节省20元. 点击链接或復·制这段描述￥k3MbbVKccMU￥后到淘♂寳♀ 或者淘宝扫码支持下同行哈 ---------------- ...

jquery实现同时展示多个tab标签+左右箭头实现来回滚动

内容：

jquery实现同时展示多张图片+定时向左单张滚动+前后箭头插件

目录：

代码：

index.html

jquery.gallery.js

master.css

所需图片：

jquery实现同时展示多个tab标签+左右箭头实现来回滚动

先上效果图：

目录：

代码：

index.html

jquery.gallery.js剩下的angular.js、jquery-1.8.2.js大家可以在网上下载。

master.css

jquery实现同时展示多个tab标签+左右箭头实现来回滚动的更多相关文章

随机推荐

热门专题