jQuery cxSlide 焦点图轮换

载入 JavaScript 文件

1. <script src="jquery.js"></script> 
2. <script src="jquery.cxslide.js"></script>

CSS 样式结构

除必要属性设置外，其他样式均可自行设置。

1. /** 
2.  * cxSlide 基本样式 
3.  * width 和 height 根据需求设置 
4.  */ 
5. .cxslide{position:relative;width:600px;height:280px;} 
6. .cxslide .box{} 
7. .cxslide .list{} 
8. .cxslide .list li{} 
9. .cxslide .btn{} 
10. .cxslide .btn li{} 
11. .cxslide .btn li.selected{} 
12. .cxslide .minus{} 
13. .cxslide .plus{} 

1. /* 横向过渡 type: ‘x‘ */ 
2. .cxslide .box{overflow:hidden;width:600px;height:280px;} 
3. .cxslide .list{overflow:hidden;width:9999px;} 
4. .cxslide .list li{float:left;position:relative;width:600px;} 

1. /* 纵向过渡 type: ‘y‘ */ 
2. .cxslide .box{overflow:hidden;width:600px;height:280px;} 
3. .cxslide .list{overflow:hidden;height:9999px;} 

1. /* 透明过渡 type: ‘fade‘ */ 
2. .cxslide .box{overflow:hidden;position:relative;width:600px;height:280px;} 

DOM 结构

1. <!-- 焦点图 --> 
2. <div id="element_id" class="cxslide"> 
3.   <div class="box"> 
4.     <ul class="list"> 
5.       <li></li> 
6.       <li></li> 
7.       ... 
8.       <li></li> 
9.     </ul> 
10.   </div> 
11.  
12.   <!-- 控制按钮会自动创建，可省略 --> 
13.   <ul class="btn"> 
14.     <li class="b_1">1</li> 
15.     <li class="b_2">2</li> 
16.     ... 
17.     <li class="b_n">n</li> 
18.   </ul> 
19.   <div class="plus"></div> 
20.   <div class="minus"></div> 
21. </div>

调用方式

1. $(‘#element_id‘).cxSlide();

动画切换

画面进入时 <li> 添加 class="in"

画面离开时 <li> 添加 class="out"