js实现点击按钮实现上一张下一张相册滚动效果
/*
***判断图片是否构成滚动效果
*/
$(function(){
if($("#bar").find(‘img‘).size()*71<=$("#bar").width()){
$("#table_img").width($("#bar").find(‘img‘).size()*71);
}
if($("#bar").find(‘img‘).size()*71>=$("#bar").width()){
var scrollfn = function(direction,bar,callback){
bar=document.getElementById(bar);
var step = 71, scrollLeft=parseInt($(bar).attr(‘scrollLeft‘),10) + direction*step,
scrollWidth=parseInt($(bar).attr(‘scrollWidth‘),10), row=$(bar).find(‘tr‘), len = $(bar).find(‘img‘).size();
var first = $(bar).find(‘img‘).first(),
last = $(bar).find(‘img‘).last();
if(scrollLeft<0){scrollLeft=0;}
if(direction > 0 ){
var offset = last.offset();
if(offset.left-$("#leftbt").offset().left <= $(bar).width()){
var first=$(row.find(‘td‘).get(0));
row.append(‘<td>‘+first.html()+‘</td>‘);
}
}else{
var offset = first.offset();
if(offset.left-$("#leftbt").offset().left<step&&offset.left-$("#leftbt").offset().left>0){
var last=$(row.find(‘td‘).get(row.find(‘td‘).size()-1));
row.prepend(‘<td>‘+last.html()+‘</td>‘);
$(bar).attr(‘scrollLeft‘,step+scrollLeft);
}
}
$(bar).animate({
scrollLeft:scrollLeft
},{
complete:function(){
if(row.find(‘td‘).size()>len){
if(direction>0){
var first=$(row.find(‘td‘).get(0));
first.remove();
}else if(direction<0){
var last=$(row.find(‘td‘).get(row.find(‘td‘).size()-1));
last.remove();
}
}
if(callback)callback();
}
});
};
var getIndex = function(list, it){
var index = 0;
list.each(function(i){
if(this == it){
index = i;
return false;
}
});
return index;
};
function left_click(){
var index = getIndex($(‘#bar‘).find(‘td‘), $(‘.focus‘).get(0));
$(‘#bar‘).find(‘td‘).eq(index - 1).click();
}
function right_click(){
var index = getIndex($(‘#bar‘).find(‘td‘), $(‘.focus‘).get(0));
$(‘#bar‘).find(‘td‘).eq(index + 1).click();
}
/*
左右按钮点击事件
*/
$(‘#leftbt‘).click(function(){
if(!$(‘#bar‘).is(":animated")){
scrollfn(-1,"bar",left_click);
}
});
$(‘#rightbt‘).click(function(){
if(!$(‘#bar‘).is(":animated")){
scrollfn(1,"bar",right_click);
scrollfn(1,"bar");
}
});
}
function table_tab(number){
/**
* 判断当前选中图片
*
**/
$("#bar td").removeClass(‘focus‘);
if(!isNaN(number)){
$("#bar td").eq(number).addClass(‘focus‘);
var img = $("#bar td").find(‘img‘).eq(number);
$(‘#ph_img_big‘).find(‘img‘).attr(‘src‘, img.attr(‘src‘));
images_WH();
}else{
$("#bar td").eq(0).addClass(‘focus‘);
var img = $("#bar td").find(‘img‘).eq(0);
$(‘#ph_img_big‘).find(‘img‘).attr(‘src‘, img.attr(‘src‘));
images_WH();
}
}
/**
* 图片的切换
*
**/
$("#bar td").live("click",function(){
$("#bar td").removeClass(‘focus‘);
$(this).addClass(‘focus‘);
var img = $(this).find(‘img‘);
$(‘#ph_img_big‘).find(‘img‘).attr(‘src‘, img.attr(‘src‘));
images_WH();
})
table_tab(2);//默认情况下点击的图片时哪一张，如果传值则默认的是传值的那一张，否则为第一张；
/**
**点击大图事件
*
*/
function getEvent(){
if(document.all){
return window.event;
}
func=getEvent.caller;
while(func!=null){
var arg0=func.arguments[0];
if(arg0){
if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0. stopPropagation)){
return arg0;
}
}
func=func.caller;
}
return null;
}
function Get_mouse_pos(obj){
var event=getEvent();
if(navigator.appName==‘Microsoft Internet Explorer‘){
return event.offsetX;
}else if(navigator.appName==‘Netscape‘){
return event.pageX-obj.offsetLeft;
}
}
function turnover(obj){
var move_x=Get_mouse_pos(obj);
var img_width=document.getElementById("imgID").offsetWidth;
var show_width=img_width;
if(move_x >= show_width/2){
obj.style.cursor="URL(../images/next.cur),auto";
obj.title=‘下一张‘;
obj.onclick=function(){
$(‘#rightbt‘).click();
};
}else{
obj.style.cursor="URL(../images/pre.cur),auto";
obj.title=‘上一张‘;
obj.onclick=function(){
$(‘#leftbt‘).click();
}
}
}
$("#imgID").mousemove(function(){
turnover(this);
})
});
/*
*图片缩放
*/
var showImg = function(img,maxWidth,maxHeight){
var rate=(maxHeight/img.height>maxWidth/img.width?maxWidth/img.width:maxHeight/img.height);
if(rate<1){
img.width=img.width*rate;
img.height=img.height*rate;
}
return img;
};
function images_WH(){
var imgs =new Image();
/**
**图片超出等比例缩放
**/
var imagID=document.getElementById("imgID");
imgs.onload = function(){
var FitWidth=894,FitHeight=435;
showImg(this, FitWidth, FitHeight);
imagID.width = imgs.width;
imagID.height = imgs.height;
imagID.style.display=‘‘;
};
imgs.src=imagID.src;
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
