根据浏览器的宽度动态设置元素的宽度,使其显示固定的元素个数(点击按钮,元素左右移动)

function initSlider() {
            var screenWidth = document.documentElement.clientWidth;//浏览器页面的宽度
            var _width = ((screenWidth - 250) / 7 - 18);
            //页面允许显示7个,每一个div的宽度;250是显示区域距离左边的距离,18是每一个div有个18的padding-left;例如一个width:100px的元素,如果padding-left:10px;则该元素的宽度变为90px;
            $(".l-item").width(_width + 'px');//设置每一个div的宽度
            $(".l-item").eq(6).width((_width - 1) + 'px');
            //设置最后一个div的宽度(因为前面的div的左边框为0,
            //最后一个div有左右两个边框,所以如果和其它元素的宽度相等,则差一个边框的宽度)
        }
        initSlider();

 点击左右按钮,元素左右移动:

function initSlider() {
            var screenWidth = document.documentElement.clientWidth;//浏览器页面的宽度
            var _width = ((screenWidth - 250) / 7 - 18);
            //页面允许显示7个,每一个div的宽度;250是显示区域距离左边的距离,18是每一个div有个18的padding-left;例如一个width:100px的元素,如果padding-left:10px;则该元素的宽度变为90px;
            $(".l-item").width(_width + 'px');//设置每一个div的宽度
            $(".l-item").eq(6).width((_width - 1) + 'px');
            //设置最后一个div的宽度(因为前面的div的左边框为0,
            //最后一个div有左右两个边框,所以如果和其它元素的宽度相等,则差一个边框的宽度)
            var btnNum = $(".l-item").length;//获取一共有多少个元素
            var clickNum=btnNum-7;//点击的次数,点击clickNum时,最后一个div显示出来
            var flexWidth=_width*btnNum;//总共包裹的div的宽度
            $('.r-data-flex').css('width',flexWidth);
            //设置包裹这些div的宽度,这样这些小div就不会换行,所以点击按钮时就能左右移动显示全
            $('.next').click(function(){
                var removeLeft=0-_width;//向左移动的距离
                $('.r-data-flex').animate({'left':"+="+removeLeft+"px"},500);//动画效果,想左移动
                index++;
                if(index==clickNum){   //如果索引值等于点击的次数,则next按钮消失 
                    $('.next').hide();  
                }else if(index==0){ //如果索引值等于0,则prev按钮消失
                    $('.prev').hide(); 
                }else{              //其它情况两个按钮均存在
                    $('.prev').show();
                    $('.next').show(); 
                }
            });
            var index=0;
            $('.prev').click(function(){
                var removeLeft=0+_width;
                $('.r-data-flex').animate({'left':"+="+removeLeft+"px"},500);
                index--;
                if(index==clickNum){
                    $('.next').hide();  
                }else if(index==0){
                    $('.prev').hide(); 
                }else{
                    $('.prev').show();
                    $('.next').show(); 
                }
                
            });
        }
        initSlider();

 封装函数后:

 function initSlider() {
            var screenWidth = document.documentElement.clientWidth;//浏览器页面的宽度
            var _width = ((screenWidth - 250) / 7 - 18);
            //页面允许显示7个,每一个div的宽度;250是显示区域距离左边的距离,18是每一个div有个18的padding-left;例如一个width:100px的元素,如果padding-left:10px;则该元素的宽度变为90px;
            $(".l-item").width(_width + 'px');//设置每一个div的宽度
            $(".l-item").eq(6).width((_width - 1) + 'px');
            //设置最后一个div的宽度(因为前面的div的左边框为0,
            //最后一个div有左右两个边框,所以如果和其它元素的宽度相等,则差一个边框的宽度)
            var btnNum = $(".l-item").length;//获取一共有多少个元素
            var clickNum=btnNum-7;//点击的次数,点击clickNum时,最后一个div显示出来
            var flexWidth=_width*btnNum;//总共包裹的div的宽度
            $('.r-data-flex').css('width',flexWidth);
            //设置包裹这些div的宽度,这样这些小div就不会换行,所以点击按钮时就能左右移动显示全
            
            var index=0;
            clickMove('next');
            clickMove('prev');

            function clickMove(obj){
            var objArgument='.'+obj;
            $(objArgument).click(function(){
                if(obj=="prev"){
                    var removeLeft=0+_width;
                    index--;
                }else{
                    var removeLeft=0-_width;
                    index++;
                }
                $('.r-data-flex').animate({'left':"+="+removeLeft+"px"},500);
                judgeIndex(index);
            });
            }
            function judgeIndex(index){
                if(index==clickNum){   //如果索引值等于点击的次数,则next按钮消失 
                    $('.next').hide();  
                }else if(index==0){ //如果索引值等于0,则prev按钮消失
                    $('.prev').hide(); 
                }else{              //其它情况两个按钮均存在
                    $('.prev').show();
                    $('.next').show(); 
                }
            }
        }
        initSlider();

 

posted @ 2016-09-28 16:46  小猪冒泡  阅读(907)  评论(1编辑  收藏  举报