jquery實現同時展現多個tab標籤+左右箭頭實現來回滾動

時間  2019-11-30
標籤 jquery 實現 同時 展現 多個 tab 標籤 左右 箭頭 來回 滾動 欄目 JQuery 简体版
原文   原文鏈接

內容：

jquery實現同時展現多張圖片+定時向左單張滾動+先後箭頭插件     css

jquery實現同時展現多個tab標籤+左右箭頭實現來回滾動html

小穎最近的項目要實現相似以下效果：jquery

藍色框圈起來的分別是向上翻、向下翻倆按鈕。綠色框分別是用戶點擊菜單後，出現相應的tab標籤，當tab標籤太多內容顯示不下時，左右兩邊的按鈕就能夠實現看後面的tab標籤和看以前的tab標籤。小穎一開始想使用bootstrap的輪播圖 carousel插件，後來發現行不通，就開始問度娘，偶然間發現了別人發表的：jquery同時展現多張圖片+定時向左單張滾動+先後箭頭插件，小穎將其修修改改後實現了本身想要的功能：jquery實現同時展現多個tab標籤+左右箭頭實現來回滾動bootstrap

jquery實現同時展現多張圖片+定時向左單張滾動+先後箭頭插件

這個因爲圖片太大，小穎就不給你們看效果圖了，感興趣的能夠把代碼複製下來，本身運行後看下具體的效果圖時怎樣的。app

目錄：

 

代碼：

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.pngthis

                          

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;
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程