zoukankan      html  css  js  c++  java
  • 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.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;
                
                 }     

                        










  • 相关阅读:
    阅读任务
    自我介绍
    学习总结
    第十二周课程总结
    第十一周课程总结
    第十周课程总结
    第九周课程总结&实验报告(七)
    第四周课程总结&实验报告
    第3周Java编程总结
    学习总结
  • 原文地址:https://www.cnblogs.com/dearxinli/p/3813033.html
Copyright © 2011-2022 走看看