內容：

小穎最近的項目要實現類似如下效果：

藍色框圈起來的分別是向上翻、向下翻倆按鈕。綠色框分別是用戶點擊菜單后，出現相應的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="images/1.jpg" width="190" height="190"/></li>
            <li><img src="images/2.jpg" width="190" height="190"/></li>
            <li><img src="images/3.jpg" width="190" height="190"/></li>
            <li><img src="images/4.jpg" width="190" height="190"/></li>
            <li><img src="images/5.jpg" width="190" height="190"/></li>
            <li><img src="images/6.jpg" width="190" height="190"/></li>
            <li><img src="images/7.jpg" width="190" height="190"/></li>
            <li><img src="images/8.jpg" width="190" height="190"/></li>
        </ul>
    </div>
</div>
<div class="wrapper">
    <div class="gallery">
        <ul>
            <li><img src="images/1.jpg" width="190" height="190"/></li>
            <li><img src="images/2.jpg" width="190" height="190"/></li>
            <li><img src="images/3.jpg" width="190" height="190"/></li>
            <li><img src="images/4.jpg" width="190" height="190"/></li>
            <li><img src="images/5.jpg" width="190" height="190"/></li>
            <li><img src="images/6.jpg" width="190" height="190"/></li>
            <li><img src="images/7.jpg" width="190" height="190"/></li>
            <li><img src="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:0;padding:0;}
.wrapper{position:relative;width:1170px;margin:auto;}
.wrapper .gallery{width:1000px;margin:auto;overflow:hidden;}
.wrapper .gallery ul{position:relative;left:0;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: 0;
    padding: 0;
}

.wrapper {
    position: relative;
    width: 1050px;
    margin: auto;
}

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

.wrapper .gallery ul {
    position: relative;
    left: 0;
    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;
}

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery實現同時展示多個tab標簽+左右箭頭實現來回滾動（美化版增加刪除按鈕） js實現點擊箭頭導航條左右滾動小程序之——scroll-view實現左右滾動tab jQuery實現tab標簽切換效果用jquery將多個頁面中相似頁面顯示到一個頁面並實現來回跳轉 jquery.flexslider.js帶左右箭頭且帶按鈕可滾動的圖片插件 jquery weui實現多tab異步滾動加載更多 jQuery 實現上下,左右滑動標簽頁（tab）切換的原生js,jquery和bootstrap實現 JQuery EasyUI 最簡單的左右布局實現及tab的右鍵菜單實現

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

免責聲明！