一、基本元素：

D:display window;用户浏览的窗口；

S:scroll window;存放内容的大容器；通过移动来改变显示的内容；

C:content;内容信息；

B:button;按钮，多种样式，可选；

 

二、思路：

通过移动S 的位置，由于C位于S中，所有的C将会同时跟随S而移动。

在D中显示的内容将会被改变。

 

三、html结构：

1 
     
      2　　
      
       3         
       
        content
       
4         
       
        content
       
5         
       
        content
       
6　　
      
7 
     

 

四、内容设置：

　　1、主要部分：

1 1.样式： 2      D： 3          overflow: hidden; 4          使超出D大小即溢出内容隐藏起来。 5      S： 6          position: relative; 7          left: 0px; 8          因为S需要进行移动，因此添加一个相对定位属性，并初始偏移值。 9      C：10          float: left;11          这个属性使C可以横向排列，这是针对块元素的设置。12 2.js：13      var scr = document.getElementsByClassName('S')[0];14      scr.style.left = (-1) * 500 * j + 'px';15      获取到S这个元素，并重设它的偏移值。

 

　　2、次要部分：

1 1.样式： 2     DSC宽高比： 3     D_width=C_width,S_width=C_width*C_count; 4     D_height=S_height=C_height; 5 　　 6 2.js： 7     偏移值：left，C的id：C_id，每个C的宽度：C_width； 8     left=-(C_id*C_width); 9 3.动画过渡：10 　　transition：改变的属性 过渡使用时间 运动模式 延迟时间；11 　　此属性可以扩展，本例中该属性只影响视觉效果，不影响框架；

 

　　/* 元素的left属性为元素水平偏移，正值向右，负值向左。当C进行切换的时候，这个C需要被显示到D的正中央，那么在它左边的其他的C（或者没有）就需要向左移动。移动的总距离就等于C的个数*C的宽度。*/

 

以上是 DSCB 框架的基本属性设置。接下来将介绍运动实现（js）

 

运动实现：

本例中使用的是：非自动轮播，按钮触发切换。

本例使用的demo。

1  2  3  4     
       5     
       6      7  8  9 10 
      
       11     
       
        12         
        
         content_1
        
13         
        
         content_2
        
14         
        
         content_3
        
15     
       
16     
       
        17         
        
18         
        
19         
        
20     
       
21 
      
22 
      
23 24 43 48 

1 .D { 2     width: 500px; 3     height: 340px; 4     margin: 0px auto; 5     border: 1px solid #000000; 6     overflow: hidden; 7 } 8  9 .S {10     position: relative;11     left: 0px;12     width: 1600px;13     height: 300px;14     transition: all 0.5s ease-in-out 0.0s;15     -moz-transition: all 0.5s ease-in-out 0.0s;16     -ms-transition: all 0.5s ease-in-out 0.0s;17     -o-transition: all 0.5s ease-in-out 0.0s;18     -webkit-transition: all 0.5s ease-in-out 0.0s;19 }20 21 .C {22     float: left;23     width: 460px;24     height: 280px;25     margin: 10px 20px;26     text-align: center;27     font-size: 32px;28     line-height: 300px;29 }30 31 .B {32     width: 180px;33     height: 30px;34     margin: 0px auto;35     text-align: center;36 }37 38 .B_number {39     float: left;40     width: 20px;41     height: 20px;42     margin: 5px 20px;43     background-color: #000000;44     opacity: 0.1;45     cursor: pointer;46 }47 48 .B_number:hover, .B_number_checked {49     opacity: 0.8;50 }51 52 p {53     font-size: 30px;;54     text-indent: 5em;55 }

 

1.获取元素

1 //获取所有按钮；2 var btn = document.getElementsByClassName('B_number');3 //获取Scroll window；4 var scr = document.getElementsByClassName('S')[0];

*因为S使用了类作标记，所有要获取类组中的第一个元素：scr[0]；也可以使用id作标记；

 

2.给所有的按钮绑定点击事件：

1 for (var i = 0; i < btn.length; i++) {2     btn[i].onclick = function btn_onclick() {3     }4 }

 

3.设置水平偏移值（内容切换）：

1 for (var j = 0; j < btn.length; j++) {2     if (btn[j] === this) {3         scr.style.left = (-1) * 500 * j + 'px';4         btn[j].className = 'B_number B_number_checked';5     } else {6         btn[j].className = 'B_number';7     }8 }

 

/* 语义分析：当按钮被点击时，判断被点击的这个按钮（this）是按钮条中的第几个（id）按钮，按钮的序号与C（内容）的序号是一一对应的。获取到按钮的序号即知道要显示的C的序号。

修改偏移值:该偏移值根据要显示的C的序号来计算，即：left=-(C_id*C_width); */

---

The end.

by Little

---