预览效果图
完整版的实例放在在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;
})();