1. HTML

My ultimate objective is - to keep the html as simple as possible. So, the final product is as following. The first image has a class called "show". Class show has higher z-index, so image with this class will display on top, thus image with this class will always display on top of the rest. The second thing you need to know is the DIV with "caption" class. It has the highest z-index. That DIV will be used to display the caption. The caption is retrieve from the REL attribute in the img element. You can put html element in the REL attribute. Be aware of extra padding and margin of the html elements you used. (eg h1, p).

Have a look at the html code:

CSS

In this section, I declared a container #gallery for this image slide show. The CSS for this tutorial is pretty straight foward, the most importance thing is the z-index. You have to make sure the "show" class z-index is lower than the "caption" z-index.

3. Javascript

Finally, the Javascript code. I have added comments in each line to explain what it does. My concept for this image slide show:

• Hide all the images
• Display the first image and caption
• Find the image with "show" class, and grab the next image using next() method
• Add "show" class to next image
• Animate the image (fadeout the current image, fadein next image)
• And, it repeats above steps over and over again

1. $(document).ready(function() {        
2.       
3.     //Execute the slideShow  
4.     slideShow();  
5.   
6. });  
7.   
8. function slideShow() {  
9.   
10.     //Set the opacity of all images to 0  
11.     $('#gallery a').css({opacity: 0.0});  
12.       
13.     //Get the first image and display it (set it to full opacity)  
14.     $('#gallery a:first').css({opacity: 1.0});  
15.       
16.     //Set the caption background to semi-transparent  
17.     $('#gallery .caption').css({opacity: 0.7});  
18.   
19.     //Resize the width of the caption according to the image width  
20.     $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});  
21.       
22.     //Get the caption of the first image from REL attribute and display it  
23.     $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))  
24.     .animate({opacity: 0.7}, 400);  
25.       
26.     //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds  
27.     setInterval('gallery()',6000);  
28.       
29. }  
30.   
31. function gallery() {  
32.       
33.     //if no IMGs have the show class, grab the first image  
34.     var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));  
35.   
36.     //Get next image, if it reached the end of the slideshow, rotate it back to the first image  
37.     var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));     
38.       
39.     //Get next image caption  
40.     var caption = next.find('img').attr('rel');   
41.       
42.     //Set the fade in effect for the next image, show class has higher z-index  
43.     next.css({opacity: 0.0})  
44.     .addClass('show')  
45.     .animate({opacity: 1.0}, 1000);  
46.   
47.     //Hide the current image  
48.     current.animate({opacity: 0.0}, 1000)  
49.     .removeClass('show');  
50.       
51.     //Set the opacity to 0 and height to 1px  
52.     $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });   
53.       
54.     //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect  
55.     $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );  
56.       
57.     //Display the content  
58.     $('#gallery .content').html(caption);  
59.          
    

1.     this.name = name;  
2.     this.addEvents({  
3.         "fired" : true,  
4.         "quit" : true  
5.     });  
6. } 
   

1. xtype            Class  
2. -------------    ------------------  
3. box              Ext.BoxComponent  
4. button           Ext.Button  
5. colorpalette     Ext.ColorPalette  
6. component        Ext.Component  
7. container        Ext.Container  
8. cycle            Ext.CycleButton  
9. dataview         Ext.DataView  
10. datepicker       Ext.DatePicker  
11. editor           Ext.Editor  
12. editorgrid       Ext.grid.EditorGridPanel  
13. grid             Ext.grid.GridPanel  
14. paging           Ext.PagingToolbar  
15. panel            Ext.Panel  
16. progress         Ext.ProgressBar  
17. propertygrid     Ext.grid.PropertyGrid  
18. slider           Ext.Slider  
19. splitbutton      Ext.SplitButton  
20. statusbar        Ext.StatusBar  
21. tabpanel         Ext.TabPanel  
22. treepanel        Ext.tree.TreePanel  
23. viewport         Ext.Viewport  
24. window           Ext.Window 
    

1. Toolbar components  
2. ---------------------------------------  
3. toolbar          Ext.Toolbar  
4. tbbutton         Ext.Toolbar.Button  
5. tbfill           Ext.Toolbar.Fill  
6. tbitem           Ext.Toolbar.Item  
7. tbseparator      Ext.Toolbar.Separator  
8. tbspacer         Ext.Toolbar.Spacer  
9. tbsplit          Ext.Toolbar.SplitButton  
10. tbtext           Ext.Toolbar.TextItem  
11.   
12. Form components  
13. ---------------------------------------  
14. form             Ext.FormPanel  
15. checkbox         Ext.form.Checkbox  
16. combo            Ext.form.ComboBox  
17. datefield        Ext.form.DateField  
18. field            Ext.form.Field  
19. fieldset         Ext.form.FieldSet  
20. hidden           Ext.form.Hidden  
21. htmleditor       Ext.form.HtmlEditor  
22. label            Ext.form.Label  
23. numberfield      Ext.form.NumberField  
24. radio            Ext.form.Radio  
25. textarea         Ext.form.TextArea  
26. textfield        Ext.form.TextField  
27. timefield        Ext.form.TimeField  
28. trigger          Ext.form.TriggerField      
    

//显式创建所容纳的组件
var panel = new Ext.Panel({
   ...
   items: [
      new Ext.Button({
         text: 'OK'
      })
   ]
};
 
//使用xtype创建
var panel = new Ext.Panel({
   ...
   items: [{
      xtype: 'button',
      text: 'OK'
   }]
};

第一个例子中，面板初始化的同时，按钮总是会立即被创建的。如果加入较多的组件，这种方法很可能界面的渲染速度。第二例子中，按钮直到面板真正在浏览器上显示才会被创建和渲染。

如果面板从未显示（例如有个tab一直是隐藏的），那么按钮就不会被创建，不会消耗任何资源了。