jQuery自适应容器焦点图，兼容移动端
jQuery自适应容器焦点图，兼容移动端浏览器，支持移动端的touch触碰事件滑动切换图片。效果如下
兼容移动端的焦点图，只要放到指定的容器中，焦点图会自动水平填满容器宽度，移动端显示只需要控制指定容器的宽度，不需要关心焦点图显示，会自动填满此容器宽度，高度等比计算得出，图片不会变形。
jQuery自适应容器焦点图，兼容移动端浏览器源代码和使用说明如下
PC端浏览器可以更改窗体大小查看自适应效果，移动端开启自动转屏，然后切换屏幕横竖方向测试。
<!doctype html>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
<style>
.bbSlider{width:100%;height:300px;overflow:hidden;position:relative}/*初始化300高度，代码会依据第一张图片等比缩放高度重置容器的高度，这样多张图片不会增加页面长度*/
.bbSlider img{width:100%;z-index:2;height:100%;border:none;display:block}
.bbSlider a{display:block;width:100%;position:relative}
.bbSlider a.pre,.bbSlider a.next{z-index:999;display:none;width:auto;padding:0 10px;position:absolute;line-height:30px;margin-top:-15px;filter:alpha(opacity=70);opacity:.7;background:#000;color:#fff;top:50%}
.bbSlider a.pre{left:0}
.bbSlider a.next{right:0}
.bbSlider span{position:absolute;bottom:0;left:0;width:100%;background:#000;filter:alpha(opacity=70);opacity:.7;color:#fff;line-height:30px;text-align:center}
.bbSlider div.scrollItem{width:100%;height:100%;overflow:hidden;position:relative}
.bbSlider div.item{width:9999999px;height:100%}
.bbSlider img.hidden{height:auto;visibility:hidden}
.bbSlider img.hidden{height:auto;visibility:hidden}
.bbSlider img.hidden{height:auto;visibility:hidden}
</style>
<title>jQuery自适应容器焦点图，兼容移动端浏览器</title>
<div style="max-width:800px;margin:0px auto">
<div class="bbSlider">
<a href="#1"><img src="http://glgangyu.com/upload/20160902/110949074.jpg" /><span>文字描述1</span></a>
<a href="#2"><img src="http://glgangyu.com/upload/20160728/210728434.jpg" /><span>文字描述2</span></a>
<a href="#3"><img src="http://glgangyu.com/upload/20160728/210736188.jpg" /><span>文字描述3</span></a>
</div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
//power by showbo,http://www.w3dev.cn ,please keep this
//type参数说明，默认left（从右边往左边滚动），top（从下往上滚动），fade（淡入淡出,IE8-有问题，淡入淡出效果出不来，直接显示图片）
//delay：动画间隔，默认6s
//aDelay：动画效果时间，默认0.5s
$.fn.bbSlider = function (type,delay,aDelay) {
type = type || 'left';
delay = (delay || 6) * 1000;
aDelay = (aDelay || 0.5) * 1000;
return this.each(function () {
function resetContainerHeight() {
h = imgFirst.offsetHeight;
w = imgFirst.offsetWidth;
step = type == 'top' ? h : w;
container.add(imgs).add(scrollItem).css('height', h);
if (type != 'fade') {
if (type == 'left') as.css('width', w);
scrollItem.attr(attr, index * step);
}
}
function initDomStructure() {
imgFirst = imgs.eq(0).clone().addClass('hidden').appendTo(container)[0];//用来获取容器更改大小时获取高度用的
$(window).resize(resetContainerHeight);//这个可以不加，方便PC端览器缩小窗口看效果测试用的
if (type == 'fade') {
as.eq(0).css('z-index',3).end().filter(':gt(0)').css({ 'z-index': 1, opacity: 0 });
as.css({ position: 'absolute', left: 0, top: 0 });
}
else {
scrollItem = $('<div class="scrollItem"></div>');
scrollItem.prependTo(container);
if (type == 'left') { var item = $('<div class="item"></div>'); scrollItem.append(item); item.append(as.css('float', 'left')); }
else scrollItem.append(as);
}
resetContainerHeight();
if (l > 1) {
var prenext = $('<a href="#" class="pre">上一张</a><a href="#" class="next">下一张</a>');
container.append(prenext);
if ($.fn.bbSlider.supportTouch) prenext.css('display', 'block');//触屏设备没有mouseover/mouseout事件，直接显示上下操作
prenext.click(function () {
animate(this.className == 'pre');
return false
});
if (!$.fn.bbSlider.supportTouch) container.mouseenter(function () { clearInterval(timer); prenext.show() }).mouseleave(function () { timer = setInterval(animate, delay); prenext.hide() }).trigger('mouseleave');
}
}
function animate(isPre) {
if (type == 'fade') {
next = index + (isPre ? -1 : 1); if (next >= l) next = 0; else if (next < 0) next = l - 1;
as.eq(next).css({ 'z-index': 2, opacity: 100, display: 'block' });
as.eq(index).css({ 'z-index': 3 }).animate({ opacity: 0 }, aDelay, function () { $(this).css({ 'z-index':1 }); });
if (isPre === true) index--; else index++;
if (index >= l) index = 0; else if (index < 0) index = l - 1;
}
else {
if (isPre === true) index--; else index++;
if (index >= l) index = 0; else if (index < 0) index = l - 1;
aCfg[attr] = index * step;
scrollItem.animate(aCfg, aDelay);
}
}
var container = $(this), imgs = $('img', this), imgFirst = imgs[0], w, h, as = imgs.parent(), l = imgs.length, timer, index = 0, next,scrollItem
, attr = { top: 'scrollTop', left: 'scrollLeft' }[type] || 'opacity', step, aCfg = {};
if ($.fn.bbSlider.supportTouch) container.data('type', type);
//第一张图片未加载完毕注册load事件，因为宽度100%，高度会等比缩放，需要加载完毕才获取到等比
if (imgFirst.complete !== true && imgFirst.readyState !== 'complete') {
imgs.eq(0).load(initDomStructure);
} else initDomStructure();//缓存中加载的，不响应load事件，可以直接初始化DOM结构
});
};
(function () {//移动端touch触摸支持
try {
document.createEvent("TouchEvent");
$.fn.bbSlider.supportTouch = true;
//是否触碰了上下一张链接
$.fn.bbSlider.isPreNext = function (el) { return el.tagName == 'A' && /^[上下]一张$/.test(el.innerHTML); };
var x, y, target = false;
document.addEventListener('touchstart', function (e) {
target = false;
var t = e.touches[0];
//是否触碰上下一张链接
if ($.fn.bbSlider.isPreNext(t.target)) { $(t.target).trigger('click'); e.preventDefault(); return; }
target = $(t.target).closest('div.bbSlider')[0];
if (target) e.preventDefault();
x = t.pageX; y = t.pageY;
}, false);
document.addEventListener('touchend', function (e) {//触碰结束判断方向，到底是切换到上一张还是下一张
if (!target) return;
target = $(target);
var t = e.changedTouches[0], v = target.data('type') == 'top' ? t.pageY - y : t.pageX - x;
if (v != 0) $(target).find('a.' + (v < 0 ? 'next' : 'pre')).trigger('click');
}, false);
} catch (e) { }
})();
$('div.bbSlider').bbSlider('');
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：jQuery自适应容器焦点图，兼容移动端