jquery学习之图片轮换



初学jQuery写的一个图片轮换效果，代码比较粗糙，欢迎大家指正；

代码 
 1 /**
 2  * @author leepood
 3  * 图片轮换效果 V 1.0
 4  * E-Mail:leepood@gmail.com
 5  */
 6 var imagestore=[{'src':'images/1.bmp','href':'www.baidu.com','title':'测试图片一','target':'_blank'},{'src':'images/2.bmp','href':'#','title':'测试图片二'},{'src':'images/3.bmp','href':'#','title':'测试图片三'},{'src':'images/4.bmp','href':'#','title':'测试图片四'}];
 7 $(document).ready(function(){    
 8     var $div_images=$("#div_images");
 9     //创建内容
10     var $div_images_content=$("<div id='div_images_content'></div>");
11     var $div_title=$("<div id='div_title'></div>");
12     var $div_title=$("<div id='div_title'></div>");
13     var $div_buttons=$("<div id='div_buttons'></div>");
14     //将创建的内容添加到主容器
15     $div_images_content.appendTo($div_images);
16     $div_title.appendTo($div_images);
17     $div_buttons.appendTo($div_images);    
18     //设置各个元素的初始样式
19     $div_images.css("margin","0").css("padding","0").css("width","400px").css("height","210px").css("border","solid 1px #fcf0a1");//外围容器层的初始化
20     $div_images_content.css("width","400px").css("height","170px").css("position","relative").css("margin","0px").css("overflow","hidden");        
21     $div_title.css("width","200px").css("height","15px").css("margin","10px 8px 5px 3px").css("padding","0").css("position","relative");
22     $div_buttons.css("width","140px").css("height","30px").css("position","relative").css("margin","0 0 5px 0").css("padding","0").css("left","250px").css("top","-18px");    
23     for (var i = 0;i<4; i++){
24         var a=i+1;
25      $("<a id='"+i+"'>"+a+"</a>").appendTo($div_buttons);
26      };
27      $("#div_buttons a").css("display","block").css("margin","6px 5px 6px 5px").css("float","left").css("border","solid 1px #fcf0a1").css("width","15px").css("height","15px").css("text-align","center").css("vertical-align","text-top").css("font-size","9px").css("text-decoration","none");
28      $("#div_buttons a").each(function(i){
29      $(this).attr("href",imagestore[i].href);
30     });
31     //初始化显示层，以第一幅图片填充，第一个按钮显示被选中样式，标题显示第一幅图片说明
32     $div_images_content.append("<img src='"+imagestore[0].src+"'/>");
33     $("#div_images_content img").css("width","100%").css("height","100%");
34     $div_title.append("<font size='3px'>"+imagestore[0].title+"</font>");
35     $("#div_buttons a:first").css("background-color","#fcf0a1");
36     //切换代码
37     $("#div_buttons a").each(function(i){
38         $(this).hover(function(){       
39             $("#div_images_content img").attr("src",imagestore[i].src);
40             $("#div_images_content img").animate({opacity: '100'
41              },"easein");
42             $("#div_title font").html(imagestore[i].title);
43             $("#div_buttons a").css("background-color","");
44             $(this).css("background-color","#fcf0a1");
45         });
46         
47     });
48 })
49

效果图:

posted @ 2010-07-28 17:47  leepood  阅读(789)  评论(0)    收藏  举报