重写图片轮换

重写了昨天的图片轮换，加入了自动切换效果，改变了布局，增强了可定制性，当然，还是有点小小的问题，在IE 6+,chrome,firfox3.68下测试正常运行

代码中存在的错误欢迎大家指正

代码 
  1 /**
  2  * @author leepood
  3  * @title  图片自动轮换效果
  4  * @version v2.0
  5  * @E-Mail leepood@gmail.com
  6  * @notice:要显示图片的数目可以在setting里调整，但需要在imagesArray中加入相应图片的参数
  7  */
  8 function changeImages()
  9 {
 10     
 11     var setting={
 12     'width':'330px',
 13     'height':'200px',
 14     'images_count':'4',    
 15     'time':'1800',    //图片切换的速度
 16     'imageschange_border_color':'#fcf0a1'
 17     
 18     };
 19     var imagesArray=[{'src':'images/1.bmp','href':'http://www.baidu.com/','title':'秋天，一片金色','target':'_blank'},
 20     {'src':'images/2.bmp','href':'http://www.163.com','title':'春天，给人一片生机的感觉','target':'_blank'},
 21     {'src':'images/3.bmp','href':'http://iagyje.blog.163.com','title':'龙眼最好吃了，我每次吃好多的','target':'_blank'},
 22     {'src':'images/4.bmp','href':'http://www.sina.com/','title':'火红的枫叶啊，有机会看看去','target':'_blank'}];
 23     //添加元素，定义变量
 24     var $div_imageschange=$("#imageschange");
 25     $div_imageschange.children().css("margin","0px").css("padding","0px");
 26     $div_imageschange.append("<div id='images_button'></div>");
 27     $div_imageschange.append("<div id='images_title'></div>");
 28     var $div_images_title=$("#images_title");
 29     var $div_images_button=$("#images_button");
 30     var count=setting.images_count;
 31     for(var a=0;a<count;a++)
 32     {
 33         var b=a+1;
 34         $div_images_button.append("<a id='"+b+"'>"+b+"</a>");
 35     }
 36     var $link_buttons=$("#imageschange a");
 37     //设置元素的初始属性
 38     //最外层容器，容纳所有元素
 39     $div_imageschange.css("width",setting.width)
 40                      .css("position","relative")
 41                        .css("height",setting.height)
 42                        .css("border","solid 1px "+setting.imageschange_border_color);
 43                       
 44     //容纳按钮的元素
 45     $div_images_button.css("position","absolute")
 46                       .css("height","20px")
 47                       .css("right","0px")
 48                       .css("bottom","21px")
 49                       .css("opacity","1")
 50                       .css("float","right");
 51                       
 52     //容纳文字说明的元素
 53     $div_images_title.css("position","absolute")
 54                      .css("height","20px")
 55                      .css("width",setting.width)
 56                      .css("bottom","0px")
 57                      .css("right","0px")
 58                      .css("background-color","black")
 59                      .css("opacity","0.6")
 60                      .css("font-size","12px")
 61                      .css("color","white");      
 62     //按钮组合
 63     $link_buttons.css("width","15px")
 64                  .css("height","15px")
 65                  .css("border","solid 1px #fcf0a1")
 66                  .css("display","block")
 67                  .css("margin","0 5px 5px 5px")
 68                  .css("font-size","12px")
 69                  .css("text-align","center")
 70                  .css("float","left")
 71                  .css("color","white")
 72                  .css("text-decoration","none");
 73     //初始化设定
 74     $div_imageschange.css("background-image","url('images/1.bmp')");
 75     $div_images_title.html(imagesArray[0].title);
 76     $("#images_button a:first").css("background","#fcf0a1");    
 77     function change(index){
 78         $div_imageschange.css("background-image", "none");
 79         $div_imageschange.css("background-image", "url('" + imagesArray[index].src + "')");
 80         $div_images_title.html("");
 81         $div_images_title.html(imagesArray[index].title);
 82         $($link_buttons[index]).attr("href", imagesArray[index].href).attr("target", imagesArray[index].target);
 83         $link_buttons.css("background","");
 84         $($link_buttons[index]).css("background","#fcf0a1");
 85     };
 86     //自动切换代码
 87     function autochange(){
 88         var i=0;
 89         setInterval(function(){
 90             change(i);
 91             if(i==setting.images_count-1)
 92             {
 93                 i=-1;
 94             }
 95             i++;    
 96         },setting.time);
 97     }
 98     autochange();
 99     //手动切换代码
100     $link_buttons.each(function(i){
101         $(this).hover(function(){
102             change(i);
103         });
104     });
105     };
106 $(document).ready(function(){
107     changeImages();
108     
109 });
110

附上截图:

posted @ 2010-07-29 11:50  leepood  阅读(499)  评论(0)    收藏  举报