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;
}
js实现点击按钮实现上一张下一张相册滚动效果的更多相关文章
- js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框
转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...
- vue 如何点击按钮返回上一页
1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...
- js实现点击按钮传值
js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...
- JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果
JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...
- 使用js实现点击按钮下载文件
有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- 原生JS 实现点击按钮创建元素
要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...
- JS实现点击按钮,下载文件
PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两 ...
- js实现点击按钮弹出上传文件的窗口
转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...
随机推荐
- Flash actionscript3.0 多个setTimeout之间会顺序执行 单线程执行 无法中止
做了一个试验,测试能否在另外的setTimeout中中断其他代码的执行.结果表明,是不可能的,Actionscript会按顺序,逐个逐个的执行. private var index:int; priv ...
- url请求返回结果测试工具(CURL)
官网:http://curl.haxx.se/download.html 具体用法用时百度 或 到时再补充
- Android API之android.os.Parcelable
android.os.Parcelable Interface for classes whose instances can be written to and restored from a Pa ...
- MSSQL-SQL SERVER一些使用中的技巧
获取前一天时间"getdate() - 1" 获取上一小时时间"dateadd(hour, -1, getdate())" order by field1, f ...
- cxf使用wsdl文件生成代码
1.先下载cxf包 http://cxf.apache.org/download.html,现在cxf包.(下载资源就有) 2.解压缩包,通过cmd命令进入到bin目录下(cd cxf\bin的路径) ...
- Servlet乱码问题
数据像水流一样从一个地方流向另一个地方. 文本流是特殊的二进制流. 既然提到乱码问题,那就必然是用错误的编码去解释二进制流. 在传输过程中必然都是以二进制流传输的. 所以,我们需要考虑的是: 有几个数 ...
- 使用Apache FtpServer
Java大法一统天下.遇到任何问题,先查一下Java中的解决方案. 地球上的许多事情,在Java中都能找到完美的解决方案. FtpServer是apache MINA项目的一个子项目,它实现了一个ft ...
- 在js或css后加?v= 版本号不让浏览器缓存
客户端会缓存css或js文件,改变版本号,客户端浏览器就会重新下载新的js或css文件,在js或css后加?v= 版本号的用法如下 代码如下: <span style="font-si ...
- A class file was not written. The project may be inconsistent, if so try refreshing this project and building it. eclipse提示错误
感觉很奇怪,查看了一下磁盘,发现workspace所在磁盘已经满了,删除一些文件之后,选择项目->Project->Clean...->选择Clean all projects-&g ...
- android自带theme
在网上搜了一下,android自带theme如下: •android:theme="@android:style/Theme.Dialog" 将一个Activity显示为对话框 ...