js 图片浏览插件原生

预览效果图

完整版的实例放在在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没有参数时，返回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 图片浏览插件原生相关推荐

简单粗暴的移动端图片浏览插件demo
使用方法: 首先引入 jQuery <script src="./fly-zomm-img.min.js"></script> 再引入图片浏览插件 < ...
PhotoSwipe 图片浏览插件使用方法 - 简单
[转载] [JS插件] PhotoSwipe 图片浏览插件使用方法一.介绍 PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实 ...
viewers.js 图片查看插件使用说明-vue中引用
viewers.js 图片查看插件官方地址官方地址安装 npm install viewerjs 在main.js 中引入 // 图片查看插件 import Viewer from 'v-vie ...
微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件
标题微信内置浏览器无法使用input图片上传和lrz.bundle.js图片压缩插件图片上传功能作为一个比较常见的功能,有时候需要在微信内置浏览器里打开,但是有些型号的手机会出现打不开的现象,点击 ...
30个图片浏览插件收集
1.MultiBox 一个lightbox支持的内容格式包括:图片,Flash,视频,mp3,html. 主页:http://www.phatfusion.net/multibox/ 下载:http: ...
Jquery 图片浏览插件
原文来源:http://www.techolics.com 在网页的首页或图片专题页面很多地方都会用到图片滑动插件来循环切换多张图片,并且用户可以点击左右按钮来切换图片.相信大家都知道jQuery是最 ...
图片浏览插件(支持图片轮播、上下张查看、放大缩小、旋转)
应用场景: 在页面上显示图片,但图片太小,不方便观看. 在页面展示的原图: 使用插件查看的效果图: 主要功能: 支持选项支持方法支持事件支持触摸支持移动支持缩放支持旋转支持键盘跨浏览 ...
PhotoSwipe 图片浏览插件使用方法
一.简介 PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产 ...
js图片压缩插件compressorjs
//d.file是上传的原始文件数据let quality=1if(d.file.size<1000*1000){ //小于1Mquality=0.8}else if(d.file.size&l ...
前端开发不容错过的jQuery图片滑块插件(转)
作为前端开发者,我们会碰到很到各种各样的jQuery插件.今天要分享的几款jQuery图片滑块插件,也就是jQuery焦点图插件,基本上会在每个网站都有应用,可以下载看看,也许你可以用到. 1.jQu ...

js 图片浏览插件原生

预览效果图

html dom结构

js gallary插件代码

js 图片浏览插件原生相关推荐

最新文章

热门文章