js 圖片瀏覽外掛原生

花村大地主發表於2017-04-06

預覽效果圖

完整版的例項放在在git上面： https://github.com/keyus/keyus_gallary,
唯一的難點就是縮圖scrollleft位置的計算..,搞懂了就非常好辦了。
相容：ie9以上版本，google,firefox,360,qq等

html dom結構

<style>
        *{
            margin: 0;padding: 0;font-size: 14px;
        }
        .top{height: 50px;background: #000}
        .gallary{padding: 20px 20px 85px 20px;overflow: hidden;background: #efefef;position: relative;box-sizing: border-box}
        .gallary-view{background: #fff;text-align: center;padding: 10px;box-sizing: border-box}
        .gallary-view__show{overflow: hidden;height: 100%;position: relative}
        .gallary-view__show--left{position: absolute;width: 50%;left: 0;height: 100%;cursor: url(images/up_l.cur),auto !important;}
        .gallary-view__show--right{position: absolute;width: 50%;right: 0;height: 100%;cursor: url(images/up_r.cur),auto !important;}
        .gallary-thumb__img{height: 60px;position: absolute;bottom: 15px;left: 85px;right: 85px;box-sizing: border-box;overflow: hidden;white-space: nowrap;}
        .gallary-thumb__img a{display: inline-block;width: 60px;height: 60px;box-sizing: border-box;border: 2px solid transparent;}
        .gallary-thumb__img a.active,.gallary-thumb__img a:hover{border: 2px solid #ff4e00;}
        .gallary-thumb__img a img{width: 100%;height: 100%;}
        .gallary-arrow{position: absolute;bottom: 0;height: 85px;width: 85px;}
        .gallary-arrow a{width: 50px;height: 70px;display: block;background: url("images/share_ioc.png") no-repeat;margin-top: 8px}
        .gallary-thumb__left{left: 0;}
        .gallary-thumb__right{right: 0;}
        .gallary-thumb__left a{background-position: 13px -155px;margin-left: 20px}
        .gallary-thumb__right a{background-position: 13px -208px;margin-left: 10px}     
</style>


<div class="gallary" data-compnent="gallary">
    <div class="gallary-view">
        <div class="gallary-view__show">
            <div class="gallary-view__show--left"></div>
            <div class="gallary-view__show--right"></div>
            <img src="" alt="">
        </div>
    </div>
    <div class="gallary-arrow gallary-thumb__left"><a href="javascript:;"></a></div>
    <div class="gallary-arrow gallary-thumb__right"><a href="javascript:;"></a></div>
    <div class="gallary-thumb__img">
        <a href="javascript:;" data-id="1" data-img="img/1.jpg"><img src="img/1.jpg" alt=""></a>
        <a href="javascript:;" data-id="2" data-img="img/2.jpg"><img src="img/2.jpg" alt=""></a>
        <a href="javascript:;" data-id="3" data-img="img/3.jpg"><img src="img/3.jpg" alt=""></a>
        <a href="javascript:;" data-id="4" data-img="img/4.jpg"><img src="img/4.jpg" alt=""></a>
        <a href="javascript:;" data-id="5" data-img="img/5.jpg"><img src="img/5.jpg" alt=""></a>
        <a href="javascript:;" data-id="6" data-img="img/6.jpg"><img src="img/6.jpg" alt=""></a>
        <a href="javascript:;" data-id="7" data-img="img/7.jpg"><img src="img/7.jpg" alt=""></a>
        <a href="javascript:;" data-id="8" data-img="img/8.jpg"><img src="img/8.jpg" alt=""></a>
        <a href="javascript:;" data-id="9" data-img="img/9.jpg"><img src="img/9.jpg" alt=""></a>
        <a href="javascript:;" data-id="10" data-img="img/10.jpg"><img src="img/10.jpg" alt=""></a>
        <a href="javascript:;" data-id="11" data-img="img/11.jpg"><img src="img/11.jpg" alt=""></a>
        <a href="javascript:;" data-id="12" data-img="img/12.jpg"><img src="img/12.jpg" alt=""></a>
        <a href="javascript:;" data-id="13" data-img="img/13.jpg"><img src="img/13.jpg" alt=""></a>
        <a href="javascript:;" data-id="14" data-img="img/14.jpg"><img src="img/14.jpg" alt=""></a>
        <a href="javascript:;" data-id="15" data-img="img/15.jpg"><img src="img/15.jpg" alt=""></a>
        <a href="javascript:;" data-id="16" data-img="img/16.jpg"><img src="img/16.jpg" alt=""></a>
        <a href="javascript:;" data-id="17" data-img="img/17.jpg"><img src="img/17.jpg" alt=""></a>
        <a href="javascript:;" data-id="18" data-img="img/18.jpg"><img src="img/18.jpg" alt=""></a>
        <a href="javascript:;" data-id="19" data-img="img/19.jpg"><img src="img/19.jpg" alt=""></a>
        <a href="javascript:;" data-id="20" data-img="img/20.jpg"><img src="img/20.jpg" alt=""></a>
        <a href="javascript:;" data-id="21" data-img="img/21.jpg"><img src="img/21.jpg" alt=""></a>
        <a href="javascript:;" data-id="22" data-img="img/22.jpg"><img src="img/22.jpg" alt=""></a>
        <a href="javascript:;" data-id="23" data-img="img/23.jpg"><img src="img/23.jpg" alt=""></a>
        <a href="javascript:;" data-id="24" data-img="img/24.jpg"><img src="img/24.jpg" alt=""></a>
        <a href="javascript:;" data-id="25" data-img="img/25.jpg"><img src="img/25.jpg" alt=""></a>
        <a href="javascript:;" data-id="26" data-img="img/26.jpg"><img src="img/26.jpg" alt=""></a>
        <a href="javascript:;" data-id="27" data-img="img/27.jpg"><img src="img/27.jpg" alt=""></a>
        <a href="javascript:;" data-id="28" data-img="img/28.jpg"><img src="img/28.jpg" alt=""></a>
        <a href="javascript:;" data-id="29" data-img="img/29.jpg"><img src="img/29.jpg" alt=""></a>
        <a href="javascript:;" data-id="30" data-img="img/30.jpg"><img src="img/30.jpg" alt=""></a>
    </div>
</div>

js gallary外掛程式碼

寫的時候沒有考慮依賴jquery庫

具體使用方式

new Gallary({
      el          : "[data-compnent='gallary']",
      selected    : "5",
});

el 為dom元，預設使用[data-compnent=’gallary’]

selected 初始顯示的縮圖的data-id,預設為1

/**
 * Created by David on 4/6/2017.
 */
/**
 * gallary
 * 外掛
 */
;(function () {
    function hasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0) return false; //當cls沒有引數時，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }
    function addClass(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
        }
    }
    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
            while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                newClass = newClass.replace(' ' + cls + ' ', ' ');
            }
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    }
    function getprev(element) {
        var e = element.previousSibling;
        if(e == null){//測試同胞節點是否存在，否則返回空
            return null;
        }
        if(e.nodeType==3){//如果同胞元素為文字節點
            var two = getprev(e);
            if(!two) return null;
            if(two.nodeType == 1) return two;
        }else{
            if(e.nodeType == 1){//確認節點為元素節點才返回
                return e;
            }else{
                return false;
            }
        }
    }
    function getnext(element) {
        var e = element.nextSibling;
        console.log(e)
        if(!e){//測試同胞節點是否存在，否則返回空
            return null;
        }
        if(e.nodeType==3){//如果同胞元素為文字節點
            var two = getnext(e);
            if(!two) return null;
            if(two.nodeType == 1) return two;
        }else{
            if(e.nodeType == 1){//確認節點為元素節點才返回
                return e;
            }else{
                return false;
            }
        }
    }
    function Gallary(option) {
        this.el             = document.querySelectorAll(option.el) || document.querySelectorAll("[data-compnent='gallary']");
        this.selected       = option.selected || 1;
        this.init();
    }
    //上一張圖片
    Gallary.prototype.upItem        = function (item,parent,view) {
        var self = this;
        item.addEventListener('click',function () {
            var cur = parent.querySelector('a.active');
            var prev = getprev(cur);
            prev && self.setItem(prev,view);
        })
    }
    //下一張圖片
    Gallary.prototype.nextItem      = function (item,parent,view) {
        var self = this;
        item.addEventListener('click',function () {
            var cur = parent.querySelector('a.active');
            var next = getnext(cur);
            next && self.setItem(next,view);
        })
    }
    //設定顯示圖片
    Gallary.prototype.setItem       = function (item,view) {
        this.setScrollleft(item,item.parentNode)

        var imgurl = item.getAttribute('data-img');
        view.setAttribute('src',imgurl);
        removeClass(item.parentNode.querySelector("a.active"),'active');
        addClass(item,'active');

    }
    //與初始化顯示ID圖片
    Gallary.prototype.initView      = function (it,view) {
        if(it.getAttribute('data-id') == this.selected){
            addClass(it,'active');
            view.setAttribute('src',it.getAttribute('data-img'))
        }
    }

    //點選縮圖圖片切換
    Gallary.prototype.toggleImg     = function (it,view) {
        var self = this;
        it.addEventListener('click',function () {
            self.setItem(this,view);
        })
    }

    //設定縮圖的位置
    Gallary.prototype.setScrollleft = function (item,item_box) {
        var box_width           = item_box.clientWidth;
        var item_clientWidth    = item.clientWidth;
        var item_offsetLeft     = item.offsetLeft;
        item_box.scrollLeft = item_offsetLeft - (box_width - item_clientWidth) / 2;
    }


    //初始化控制元件
    Gallary.prototype.initControl   = function () {
        var self = this;
        Array.prototype.forEach.call(self.el,function (item) {

            var thumb       = item.querySelector('.gallary-thumb__img'),           //縮圖盒子
                thumb_a     = item.querySelectorAll('.gallary-thumb__img a'),      //縮圖項
                view        = item.querySelector('.gallary-view__show img'),       //大圖盒子
                bigleft     = item.querySelector('.gallary-view__show--left'),     //大圖左側
                bigright    = item.querySelector('.gallary-view__show--right'),    //大圖右側
                thumbleft   = item.querySelector('.gallary-thumb__left'),          //縮圖左
                thumbright  = item.querySelector('.gallary-thumb__right');         //縮圖右

            Array.prototype.forEach.call(thumb_a,function (it) {
                self.initView(it,view);                                            //初始化顯示一張大圖
                self.toggleImg(it,view);                                           //監聽點選縮圖切換
            })
            self.upItem(bigleft,thumb,view);                                       //監聽大圖區域左切換
            self.upItem(thumbleft,thumb,view);                                     //監聽略略圖左切換
            self.nextItem(bigright,thumb,view);                                    //監聽大圖區域右邊切換
            self.nextItem(thumbright,thumb,view);                                  //監聽略略圖右邊切換

        })
    }
    Gallary.prototype.init = function () {
        this.initControl();
    }

    window.Gallary = Gallary;
})();

谷歌瀏覽器外掛-jsonView外掛
2017-12-06
谷歌瀏覽器JSONView
常用瀏覽器外掛
2022-11-13
瀏覽器
chrome瀏覽器 json外掛【WEB前端助手】
2020-12-25
Chrome瀏覽器JSONWeb前端
js拖動滑塊瀏覽圖片功能
2017-03-10
JS
JQuery外掛：圖片上傳本地預覽外掛，改進案例一則。
2016-05-25
jQuery
iOS圖片瀏覽器 - XLPhotoBrowser(類似微信多圖片瀏覽效果)
2016-07-21
iOS瀏覽器
5款好用的開源JS圖片裁剪外掛(3個jQuery外掛，2個AngularJS外掛)
2016-03-08
JSjQueryAngular
JXImageBrowser (圖片瀏覽器)
2016-05-05
瀏覽器
圖片懶載入外掛echo.js分享
2017-04-12
JS
IE瀏覽器外掛開發
2022-04-28
瀏覽器
好用的谷歌瀏覽器外掛
2018-08-21
谷歌瀏覽器
UC瀏覽器外掛開發
2014-08-19
瀏覽器
跨瀏覽器外掛技術
2013-05-20
瀏覽器
google瀏覽器外掛開發
2024-04-28
Go瀏覽器
octobercms 圖片裁剪外掛
2019-01-05
不同瀏覽器下圖片滾動效果的js
2009-07-07
瀏覽器JS
[外掛擴充套件]幻燈片 | 滾動圖片外掛
2020-04-04
套件
[外掛擴充套件]廣告圖片漂浮外掛
2019-05-11
套件
[外掛擴充套件]圖片輪播外掛
2019-05-11
套件
ApolloOne for mac(圖片瀏覽工具)
2022-09-12
Mac
Swift 3 圖片瀏覽工具
2017-04-19
Swift
ABase ImageBrowserActivity之圖片瀏覽
2016-06-22
win10瀏覽器怎麼加入外掛_win10瀏覽器外掛在哪設定
2019-12-11
Win10瀏覽器
基於uni-app圖片上傳JS外掛
2019-04-13
APPJS
一起擼個朋友圈吧 - 圖片瀏覽（中）【圖片瀏覽器】
2018-01-04
瀏覽器
瀏覽器外掛 network-plus
2020-06-20
瀏覽器
Chrome瀏覽器實用外掛集合
2018-12-03
Chrome瀏覽器
iTab瀏覽器外掛安裝教程
2022-11-04
瀏覽器
ubuntu 安裝瀏覽器flash外掛
2014-04-04
Ubuntu瀏覽器
tampermonkey外掛指令碼油猴外掛下載 - 篡改猴瀏覽器外掛
2023-12-15
指令碼瀏覽器
瀏覽器全屏外掛screenfull.js與全屏狀態監聽
2018-08-16
瀏覽器JS
iSee Pro for Mac圖片瀏覽器
2021-08-02
Mac瀏覽器
GraphicConverter for Mac(圖片瀏覽器)
2022-10-14
Mac瀏覽器
幻燈片式圖片瀏覽器
2014-07-01
瀏覽器
win10瀏覽器外掛管理怎麼設定_win10瀏覽器如何載入外掛
2020-07-04
Win10瀏覽器
js上傳圖片預覽，相容IE6以上各大主流瀏覽器
2019-05-11
JS瀏覽器
[外掛擴充套件]圖片批量上傳外掛2.0
2019-05-11
套件
[需求建議]圖片牆外掛（外掛需求）[已完成]
2019-05-11

js 圖片瀏覽外掛原生

預覽效果圖

html dom結構

js gallary外掛程式碼

相關文章