當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js 图片浏览插件原生

發布時間：2023/12/10 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 图片浏览插件原生小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

預覽效果圖

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

html dom結構

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沒有參數時，返回falsereturn 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; })();

總結

以上是生活随笔為你收集整理的js 图片浏览插件原生的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： EJB3 学习笔记六
下一篇： AutoHotKey程序防止反编译的简单