/*
***判断图片是否构成滚动效果
*/
$(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实现点击按钮实现上一张下一张相册滚动效果的更多相关文章

  1. js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框

    转自https://blog.csdn.net/yimawujiang/article/details/86496936 问题:js实现点击按钮时显示弹框,点击按钮及弹框以外的区域时隐藏弹框? 方案一 ...

  2. vue 如何点击按钮返回上一页

    1,vue 如何点击按钮返回上一页呢? 这是vue挂载的范围html代码 <div @click="goOff()">返回</div> 下面是点击返回的方法 ...

  3. js实现点击按钮传值

    js实现点击按钮传值 page1源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  4. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  5. 使用js实现点击按钮下载文件

    有时候我们在网页上需要增加一个下载按钮,让用户能够点击后下载页面上的资料,那么怎样才能实现功能呢?这里有两种方法: 现在需要在页面上添加一个下载按钮,点击按钮下载文件. 题外话,这个下载图标是引用的 ...

  6. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  7. 原生JS 实现点击按钮创建元素

    要求: 点击按钮,随机生成一个20px-100px宽度正方形,随机颜色,随机位置,不能出可视区域外 思路:(1)创建按钮,为按钮添加事件侦听 (2)触发事件,创建一个元素 (3)设置元素样式,包括大小 ...

  8. JS实现点击按钮,下载文件

    PS:本文说的,并非如何用js创建流.创建文件.实现下载功能. 而是说的:你已知一个下载文件的后端接口,前端如何请求该接口,实现点击按钮.下载文件到本地.(可以是zip啦.excel啦都是一样) 有两 ...

  9. js实现点击按钮弹出上传文件的窗口

    转自:https://www.jb51.net/article/100916.htm 1.详细描述 在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件. 2.代码 ? 1 2 ...

随机推荐

  1. 解决Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4

    Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4 from http://uk.maven.o ...

  2. 使用 Scrapy 构建一个网络爬虫

    来自weixin 记得n年前项目需要一个灵活的爬虫工具,就组织了一个小团队用Java实现了一个爬虫框架,可以根据目标网站的结构.地址和需要的内容,做简单的配置开发,即可实现特定网站的爬虫功能.因为要考 ...

  3. 通过配置Apache实现404页面替换

    一.通用情况--修改apache配置.htaccess 一般网站报404原因都是找不到资源,是服务器(以Apache为例)报错,Apache自定义了404输出,我们的目的是使用自定义的404.html ...

  4. C输出大于127的ACSII字符

    近期,我们的DNS服务器收到了一些异常的域名请求,从访问日志看到很多域名都被返回了FORMAT ERROR的错误码,但是访问日志中的域名看起来很正常啊,为什么会返回FORMAT ERROR的错误码呢? ...

  5. nginx error: upstream prematurely closed connection while reading response header from upstream

    本篇文章由:http://xinpure.com/nginx-error-upstream-prematurely-closed-connection-while-reading-response-h ...

  6. HDUOJ--畅通工程

    畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  7. YACC、LEX、JAVACC-------常用的编译工具

    CC(Compiler Compiler) CC的意思就是"编译器的编译器". 你可以定义一种上下文无关文法(CFG),然后针对这个特定的CFG你可以写出一个C程序来解释这种CFG ...

  8. php 内存管理

    内存是计算机⾮常关键的部件之⼀,是暂时存储程序以及数据的空间,CPU只有有限的寄存器可以⽤于存储计算数据,⽽⼤部分的数据都是存储在内存中的,程序运⾏都是在内存中进⾏的.和CPU计算能⼒⼀样, 内存也是 ...

  9. SQL Server 数据库表的统计信息的更新

             最近在调整基础信息数据时,新增了几个客户类型,意想不到的事情发生了,在使用新增的客户类型作为 查询条件查询报表时,居然出现了超时的现象,但是用其他以前的客户类型查询就没有问题,用一个 ...

  10. posix 匿名信号量与互斥锁 示例生产者--消费者问题

    一.posix 信号量 信号量的概念参见这里.前面也讲过system v 信号量,现在来说说posix 信号量. system v 信号量只能用于进程间同步,而posix 信号量除了可以进程间同步,还 ...