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

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();

 

转载于:https://www.cnblogs.com/xiaozhumaopao/p/5916989.html