写在前面的话

其实网上这种插件有很多  fullpage.js就是一个非常好的开源 且功能非常多

我之所以不用是觉得插件太大 而我只是要屏幕横移这么一个小功能，当然也包括的样式修改的小问题 

------------------------------------------------------------------------------------------------------------------------------------------------------------

JS部分

------------------------------------------------------------------------------------------------------------------------------------------------------------

这边前提供外部调用函数moveTo(index),index表示需要移动到第几个section

1 var Stepbar = function () { 2     if (this instanceof Stepbar) { 3         var me = this; 4  5         //步骤列表 6         me.$steps = $('.stepbox ul li'); 7         //容器 8         me.$container = $('.container'); 9         me.$sections = $('.container .section');10 11         me.$steps.on('click', function () {12             var index = me.$steps.index(this);13             me.moveTo(index);14         })15 16         me.moveTo(0);17 18     } else {19         return new Stepbar();20     }21 }22 23 Stepbar.prototype = {24     moveTo: function (index) {25         var me = this26         var pos = $(me.$sections[index]).position().left;27         me.$container.animate({28             left: -pos + 'px'29         }, 300);30 31         me._actived(index);32     },33     next: function () {34         var me = this;35     },36     _actived: function (index) {37         var me = this;38         me.$steps.filter('.active').removeClass('active');39         $(me.$steps[index]).addClass('active');40     }41 42 }

------------------------------------------------------------------------------------------------------------------------------------------------------------

CSS部分

------------------------------------------------------------------------------------------------------------------------------------------------------------

这边因为section的个数的不定的 所以 用n表示section的个数，整个div容器的宽度就是n*100%，m表示每个section的宽度（因为需要占满整个屏幕宽度为屏幕的100%，而整个div宽度是大于100%的，所以需要100/n来表示），

举个例子：需要4个section 那么 整个容器就是400% 每个section的宽度就是25%

1 .container { 2     position: relative; 3     width: n*100%;            n=section的个数 4  5     .section { 6         width: m%;            m=100/n 7         height: 800px; 8         float: left; 9     }10 }

这边因为是分步骤的，我索性把步骤的也贴出来

.stepbox {
       ul {        height: 50px;        line-height: 50px;        list-style: none;        float: right;        margin-bottom: 10px;        li {            width: 140px;            float: left;            font-size: 14px;            text-align: center;            cursor: pointer;            font-size: 16px;            span {                display: inline-block;                text-align: center;                margin-right: 8px;                height: 30px;                width: 30px;                line-height: 30px;                border-radius: 50%;                background-color: #d1d1d1;            }            i {
                   display: inline-block;                font-size: 24px;            }            &:hover {
                   span {                    background-color: @themeColor;                }            }        }        .active {
               span {                background-color: @themeColor;            }        }    }}

------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML部分

------------------------------------------------------------------------------------------------------------------------------------------------------------

HTML这边分了两块，一块是步骤的，一块是主体屏幕显示的内容

1 
     
                 //步骤 2     
      
        3         
       
步骤1
 4         
       
步骤2
 5         ...... 6     
      
 7     
      
 8 
     
 9 10 
     
                //内容11     
      
       12         HTML内容13     
      
14     
      
       15         HTML内容16     
      
17     ......18     
      
19 
     

------------------------------------------------------------------------------------------------------------------------------------------------------------

展示

------------------------------------------------------------------------------------------------------------------------------------------------------------