www.gusucode.com > 大气广告设计类企业公司网站织梦模板源码程序 > 大气广告设计类企业公司网站织梦模板/templets/pinmoban/imgstyle/image_browse_2@.js
/*
* 高清图浏览脚本
* @version 1.0.1
* @author 付浩
* @email anjor_web#163.com
* @time 2012-3-23
* 1.图片列表下方滑块加$('#scrollButton').fadeTo(20, 0.5); ie6出先焦点问题，暂时去掉。
*
*
* */
/*
* @version 1.0.2修改
* indexPic变量由页面指定
*
*
* */
/*
* @version 1.1.0 修改
* 最后一张图片点击下一张时候，滑动出提示，不再自动跳转到下一个图集
*
*
* */
//var indexPic = 0;
try{
indexPic--;
}catch(e){
var indexPic=0;
}
var scrollIndex = indexPic;
var brPic = window.brPic = function(){
return brPic.fn.initialization();
};
brPic.fn = brPic.prototype = {
_picList: $('.smallScroll').find('li'),
_lineMoveWidth: function(){
return parseInt((1/this._picList.length)*422);
},
_loadingPic : $('#loadingPic'),
_autoTimer: null,
_isBindOpen: true,
_isAuto: true,
_isMove: false,
_autoSpeed: 5000, //播放速度
_dragx: 0,
_moveTimer: null,
_isLast: false,
_nextMove: 0,
_isNextHref : 0,
/*
* 页面载入后动态加载高清图
* @param {Number}
* */
_showBig: function(n){
var _thisLi = $('.smallScroll').find('li').eq(n),
oInfo = _thisLi.find('.s_info').html(),
oBigUrl = _thisLi.attr('data-big'),
oTitle = _thisLi.attr('data-title'),
oNewPic = new Image();
$('#bigPicInfo').html(oInfo);
oNewPic.onload = function(){
//$('#showBigPic').show();
$('#mouseOverleft, #mouseOverright, .page_left, .page_right, .mouse-bg').css('height', oNewPic.height);
$('#test_scroll_bar').css('top', 15);
$('#bigPicInfo').css('top', 0);
//$('#source_img').attr('href', oBigUrl);
//$('#homeTitle').text(oTitle).attr('title', oTitle);
oNewPic = null;
};
oNewPic.src = $('#showBigPic').attr('src');
},
/*
* 图片列表小图滚动逻辑
* @param {Number} n
* */
_showSmall: function(n){
if(n <= 0){
n =0;
};
if(brPic.fn._picList.length <= 4){
}else if(n <= brPic.fn._picList.length -4){ //滚动和addClass分离
$('.smallScroll').stop().animate({
left: -131*n+"px"
});
}else{
$('.smallScroll').stop().animate({ //如果n值超出范围，则滚动到最大值
left: -131*(n-3)+"px"
});
}
//当前页面小图滚动时候，不需要设置class="on"
// version 1.0.2
//$('.smallScroll li').eq(n).addClass('on').siblings('li').removeClass('on');
if(n <= 0){
brPic.fn._linemove(0);
}else{
if(n >= brPic.fn._picList.length-1){
brPic.fn._linemove(422);
}else{
brPic.fn._linemove(brPic.fn._lineMoveWidth()*(n+1));
}
}
//brPic.fn._showBig(n);
},
_dragMove: function(){ //拖动函数
},
_linemove: function(w){ //滑动函数
$('#scrollButton').animate({
left: w+"px"
});
},
_leftPic: function(){
scrollIndex--;
if(scrollIndex <= 0 ){
scrollIndex = 0;
}
if(!$('.smallScroll').is('animated')){
brPic.fn._showSmall(scrollIndex);
}
},
_rightPic: function(){
scrollIndex++;
if(scrollIndex >= brPic.fn._picList.length-1){
scrollIndex = brPic.fn._picList.length-1;
}
if(!$('.smallScroll').is('animated')){
brPic.fn._showSmall(scrollIndex);
}
},
//显示下一个图集提示
_nextAlbum: function(){
this._nextMove = $('.show_img').height()/2-$('#albumDialog').height()/2;
$('#albumDialog').animate({
top: brPic.fn._nextMove
});
brPic.fn._stopPlay();
},
//隐藏下一个图集
_hideNextAlbum: function(){
$('#albumDialog').animate({
top: -$('#albumDialog').height()
});
brPic.fn._stopPlay();
},
//向左链接
_leftUrl: function(){
if(indexPic < 1){
alert("已经是第一张了！")
}else{
brPic.fn._prepic();
}
},
//向右链接
_rightUrl: function(){
if(this._isLast){
if(indexPic >= brPic.fn._picList.length-1){
brPic.fn._nextAlbum();
//brPic.fn._isNextHref++;
}else{
//
brPic.fn._nextpic();
//location.href= $('.smallScroll li').eq(indexPic).next().attr('url');
}
}
},
_prepic: function()
{
id=indexPic - 1;
var nextpic_src=document.getElementById("imglist_"+id).value;
brPic.fn._ChangePic(nextpic_src, "#showBigPic",id)
},
_nextpic: function()
{
id=indexPic + 1;
var nextpic_src=document.getElementById("imglist_"+id).value;
brPic.fn._ChangePic(nextpic_src, "#showBigPic",id)
},
_ChangePic: function (picsrc, imgid,i)
{
indexPic=i;
picsrc=picsrc.replace("-lp","");
$(imgid).get(0).src = picsrc;
brPic.fn._showBig(indexPic)
$('.smallScroll li').eq(indexPic).addClass('on').siblings('li').removeClass('on');
brPic.fn._showSmall(indexPic);
brPic.fn. _picModel();
},
//重新播放
_replaypic:function()
{
var nextpic_src=document.getElementById("imglist_0").value;
brPic.fn._ChangePic(nextpic_src, "#showBigPic",id)
brPic.fn._hideNextAlbum();
indexPic =0;
brPic.fn._showBig(indexPic)
$('.smallScroll li').eq(indexPic).addClass('on').siblings('li').removeClass('on');
brPic.fn._showSmall(indexPic);
},
_setCookie: function(name, value, options) {
if (typeof value != 'undefined') {
options = options || {};
if (value === null) {
value = '';
options = $.extend({}, options);
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString();
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
},
_autoPlay: function(){
$('.autoplay').text("暂停(播放)").addClass('stop');
this._isAuto = true;
this._autoTimer = window.setTimeout(function(){
brPic.fn._rightUrl();
}, this._autoSpeed);
this._setCookie('autoPlay', 'true', {expires: 7});
},
_stopPlay: function(){ //停止自动播放
$('.autoplay').text("播放(暂停)").removeClass('stop');
this._isAuto = false;
window.clearTimeout(this._autoTimer);
this._setCookie('autoPlay', 'false', {expires: 7});
},
_dragMov: function(){
var a = parseInt(131 * (parseInt($("#scrollButton").css("left"))/422)*(this._picList.length -4));
$(".smallScroll").css({left:-a+"px"});
},
_checkModel: function(){ //监测模式
var model = $('#hiddeModel').val() || 0;
var tmp = new tmpHTML(); //获取结构
if(model ==1){
$('#listModel').html(tmp.smallPic()).addClass('condtype');
if(typeof console != 'undefined'){
console.warn('显示模式：左图右字');
}
}else{
$('#listModel').html(tmp.bigPic()).removeClass('condtype');
if(typeof console != 'undefined'){
console.warn('显示模式：上图下字');
}
}
//brPic.fn._showBig(0);
},
//显示模式
_listModel: function(){
brPic.fn._stopPlay();
$('.img_list').show();
$('.show_img, .pic_list').hide();
$('.autoplay').hide().next('li').hide();
$('.source').hide().prev().hide();
$('#showModel').text('单图模式').parent().removeClass('list').addClass('show');
$('.img_function').css('width', '200px');
brPic.fn._isBindOpen = false;
},
_picModel: function(){
brPic.fn._stopPlay();
$('.img_list').hide();
$('.show_img, .pic_list').show();
brPic.fn._showSmall(indexPic);
$('.autoplay').show().next('li').show();
$('.source').show().prev().show();
$('#showModel').text('列表模式').parent().removeClass('show').addClass('list');
$('.img_function').css('width', '450px');
brPic.fn._isBindOpen = true;
},
_bindClick: function(){
$('#mouseOverleft, #mouseOverright, .page_left, .page_right, .mouse-bg').css('height', $('#showBigPic').height());
$('#mouseOverleft, #mouseOverright').hover(function(){
$(this).find('div:first').show();
}, function(){
$(this).find('div:first').hide();
});
$('#left_go').live('click', function(e){
e.preventDefault();
//brPic.fn._leftPic(); 1.0.1版本使用
brPic.fn._leftUrl();
});
$('#right_go').live('click', function(e){
e.preventDefault();
//brPic.fn._rightPic(); 1.0.1版本使用
brPic.fn._rightUrl();
});
$('#goleft').live('click', function(e){
e.preventDefault();
brPic.fn._leftPic();
brPic.fn._stopPlay();
});
$('#goRight').live('click', function(e){
e.preventDefault();
brPic.fn._rightPic();
brPic.fn._stopPlay();
});
/*
* 收起下一个图集提示
* version 1.1.0 版本新增功能
* */
$('#hideAlbum').bind('click', function(){
brPic.fn._hideNextAlbum();
});
//重新播放
$('#albumDialog .replay').bind('click', function(){
brPic.fn._autoPlay();
//location.href = $('.smallScroll li').eq(0).attr('url');
});
//显示模式
$('#showModel').bind('click', function(e){
e.preventDefault();
if($('.img_list').is(':visible')){
brPic.fn._picModel();
}else{
brPic.fn._listModel();
}
});
this._picList.bind('click', function(e){
/*
* version: 1.0.2版本删除掉事件行为，完全又元素本身a跳转
*
* */
//e.preventDefault();
//brPic.fn._stopPlay();
//var oIndex = $(this).index();
//indexPic = oIndex;
//brPic.fn._showSmall(oIndex);
});
$('.autoplay').bind('click', function(e){
e.preventDefault();
if($(this).hasClass('stop')){
brPic.fn._stopPlay();
}else{
brPic.fn._autoPlay();
}
});
//快捷键切换
$(document).bind('keydown', function(e){
if(!brPic.fn._isBindOpen){ return; }
var e = window.event || e;
e.keyCode == 37 && brPic.fn._leftUrl();
e.keyCode == 39 && brPic.fn._rightUrl();
});
//焦点
var scrollPos;
if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
scrollPos = document.documentElement;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body;
}
var _topnav = $("#toolBar").offset().top;
$(scrollPos).animate({scrollTop:_topnav}, 500);
//拖拽浏览
if(brPic.fn._picList.length > 4){
$('#scrollButton').bind('selectstart', function(){ return false; });
$('#scrollButton').click(function(e){
e.preventDefault();
}).mousedown(function(e){
brPic.fn._stopPlay();
//设置捕获范围
if($('#scrollButton').setCapture){
$('#scrollButton').setCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
brPic.fn._isMove = true;
brPic.fn._dragX = e.pageX- parseInt($('#scrollButton').css('left'));
//$('#scrollButton').fadeTo(20, 0.5);
});
$(document).mousemove(function(e){
if(brPic.fn._isMove){
var x = Math.max(0, Math.min(e.pageX-brPic.fn._dragX, 422));
//console.log(e.pageX, "-", brPic.fn._dragX);
$('#scrollButton').css('left', x);
brPic.fn._dragMov();
}
}).mouseup(function(){
brPic.fn._isMove=false;
//取消捕获范围
if($('#scrollButton').releaseCapture){
$('#scrollButton').releaseCapture();
}else if(window.captureEvents){
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
//$('#scrollButton').fadeTo("fast", 1);
if(parseInt($(".smallScroll").css("left"))%131 != 0){
var argleft = parseInt($(".smallScroll").css("left"));
$(".smallScroll").animate({left:argleft+(Math.abs(parseInt($(".smallScroll").css("left"))%131))+"px"},"fast");
};
});
}
},
initialization: function(){ //初始化
//判断是否最后一张图片
if($('#next_album').val()== "" || $('#next_album').val() == undefined){
this._isLast = false;
}else{
this._isLast = true;
}
brPic.fn._checkModel();
brPic.fn._showBig(indexPic);
brPic.fn._bindClick();
brPic.fn._showSmall(indexPic);
$('.smallScroll li').eq(indexPic).addClass('on').siblings('li').removeClass('on');
if(this._setCookie('autoPlay') == "true"){
brPic.fn._autoPlay();
}
}
};
function tmpHTML(){
this.bigPic = function(){
return '<div class="img_box pr">\
<div id="mouseOverleft" class="pa">\
<div class="page_left pa">\
<span class="pro_pic fixPng"></span>\
</div>\
<div class="mouse-bg pa">\
</div>\
</div>\
<div id="mouseOverright" class="pa">\
<div class="page_right pa">\
<span class="next_pic fixPng"></span>\
</div>\
<div class="mouse-bg pa">\
</div>\
</div>\
<img src="http://images.aili.com/photo/03/blankBg.gif" id="showBigPic" alt="">\
<div id="loadingPic"></div>\
</div>\
<div class="clearFix"></div>\
<p class="picinfo" id="bigPicInfo"></p>\
';
};
this.smallPic = function(){
return '<div class="lImg pr fl">\
<div id="mouseOverleft" class="pa">\
<div class="page_left pa">\
<span class="pro_pic fixPng"></span>\
</div>\
<div class="mouse-bg pa">\
</div>\
</div>\
<div id="mouseOverright" class="pa">\
<div class="page_right pa">\
<span class="next_pic fixPng"></span>\
</div>\
<div class="mouse-bg pa">\
</div>\
</div>\
<img src="http://images.aili.com/photo/03/blankBg.gif" id="showBigPic" alt="">\
</div>\
<div class="rScrollInfo fr pr" id="">\
<div id="test_container">\
<p id="bigPicInfo"></p>\
</div>\
<div class="overScroll pa" id="test_scroller">\
<div id="test_scroll_up"></div>\
<div id="test_scroll_bar"></div>\
<div id="test_scroll_down"></div>\
</div>\
</div>';
}
}