内容：

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

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

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

蓝色框圈起来的分别是向上翻、向下翻俩按钮。绿色框分别是用户点击菜单后，出现相应的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标签+左右箭头实现来回滚动的更多相关文章

  1. jquery实现同时展示多个tab标签+左右箭头实现来回滚动（美化版增加删除按钮）

    闲聊 前段时间小颖分享了:jquery实现同时展示多个tab标签+左右箭头实现来回滚动文章,引入项目后,我们的组长说样子太丑了,小颖觉得还好啊,要不大家评评理,看下丑不丑?无图无真相,来上图: 看吧其 ...

  2. vant中tab标签切换时会改变内容滚动高度

    vant的tabs标签页,标签切换时会改变内容区的滚动高度,这是因为内容区共用同一个父元素为滚动区域引起的,解决办法:在tabs的内容区域嵌套一层滚动区域,让每个内容区域使用单独的滚动元素就行了.   ...

  3. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  4. Jquery LigerUI框架学习（二）之Tree于Tab标签实现iframe功能

    LigerUI框架Tree于Tab标签动态使用,当点击Tree后动态创建Tab标签,和通常用的iframe框架功能类似 Tree中的关键代码 //Tree初始化 $("#tree1" ...

  5. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

  6. jquery切换tab标签例子

    之前做了一个简单的小效果,使用jquery方式,让tab标签切换,效果如下 代码其实很简单,首先先把代码分享给大家,代码如下 var shoptoggle = $('.shoptoggle .shop ...

  7. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  8. 支持自动切换的tab标签代码札记

    html代码如下: <!-- tab标签代码begin --> <div class="tab1" id="tab1"> <div ...

  9. 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 （转）

    原博客地址  :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...

随机推荐

  1. GMA Round 1 极坐标的忧伤

    传送门 极坐标的忧伤 为什么你们不喜欢为我求导……——极坐标 极坐标的心意,想必已经传达到了,那么请为极坐标方程$r=t$(也写作$ρ=θ$)求导吧. 为了考验你的忠诚,你需要回答$r=t$在(0,$ ...

  2. JSP(8)—EL案例和JSTL案例

    1.EL案例 el.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  3. MyEclipse 2015 SVN 安装

    SVN的在线安装 1.打开MyEclipse,找到顶部菜单栏 Help(帮助)-Install from Site…(从网站安装),如下图 2. 点击Install from Site…后会出现让你选 ...

  4. 旋转矩阵（Rotation Matrix）的推导及其应用

    向量的平移,比较简单. 缩放也较为简单 矩阵如何进行计算呢?之前的文章中有简介一种方法,把行旋转一下,然后与右侧对应相乘.在谷歌图片搜索旋转矩阵时,看到这张动图,觉得表述的很清晰了. 稍微复杂一点的是 ...

  5. shell字符串的用法

    shell字符串的用法 注意:shell4.2和shell4.1会有差别,较低版本的shell可能不支持某些功能 获取字符串长度:${#string} 获取子串: 注:(左边的第一个字符是用 0 表示 ...

  6. SQLite在.NET中自适应32位/64位系统

    如果一个.NET应用要自适应32位/64位系统,只需要在项目的“目标平台”设置为“Any CPU”.但是如果应用中使用了SQLite,情况就不同了. SQLite的.NET开发包来自是System.D ...

  7. Docker permission denied while trying to connect to the Docker daemon socket

    Problem jenkins执行docker打包的时候报错,说没有权限 docker build -t docker.ryan-miao.com/com.demo:f1aa23e --build-a ...

  8. [Python设计模式] 第13章 造小人——建造者模式

    github地址:https://github.com/cheesezh/python_design_patterns 题目1 用程序模拟一个画小人的过程,要求小人要有头,身子,左手,右手,左脚,右脚 ...

  9. http重定向到https

    <?xml version="1.0" encoding="UTF-8"?> <configuration> <system.we ...

  10. linux性能压测工具

    http://benjr.tw/532 http://blog.yufeng.info/archives/2023 https://www.cnblogs.com/zhoujinyi/archive/ ...