Play Google

1.  $.fn.pictureRoll.defaults = {
2.         container:"#pictureRoll",                              //整个滚动的容器
3.         titleContainer:"#pictureRoll span",                    //标题栏容器
4.         imgContainer:"#pictureRoll img",                       //图片容器
5.         activeClass:"active",                                  //当前激活标题的样式
6.         timeInterval:4000                                      //滚动时间间隔，单位为毫秒。
7.     }

1.  $("#pictureRoll").pictureRoll({timeInterval:3000});

/*
 *Author:karry
 *Version:1.0
 *Time:2009-02-09
 *jquery1.3.0
 *图片翻转滚动
 */

1. (function($) {
2.     var time=1;
3.     var opts=null;
4.     var intervalId = null;
5.     $.fn.pictureRoll = function(options) {
6.         opts = $.extend({},  $.fn.pictureRoll.defaults, options);
7.         //初始化
8.         //将除第一个外的图片隐藏
9.         $(opts.imgContainer+":not(:first)").hide();
10.         $(opts.container).height($(opts.titleContainer).outerHeight(true)*$(opts.titleContainer).size()+$(opts.imgContainer).outerHeight());
11.         //给第一个加样式
12.         $(opts.titleContainer+":first").addClass(opts.activeClass);
13.         intervalId = window.setInterval(autoRoll,opts.timeInterval);
14.         //鼠标移上去之后停止滚动，移开后继续滚动
15.         $(opts.imgContainer).hover(function(){
16.             clearInterval(intervalId);
17.         },function(){
18.              intervalId = window.setInterval(autoRoll,opts.timeInterval);
19.         });
20.         //点击文字后，跳转到对应的图片重新开始循环滚动
21.         $(opts.titleContainer).each(function(index) {
22.             $(this).click(function() {
23.                 if (time != index+1)
24.                 {
25.                     clearInterval(intervalId);
26.                     $(opts.imgContainer+":visible").slideUp("slow").parent().children(opts.titleContainer).removeClass(opts.activeClass);
27.                     $(this).addClass("active").parent().children(opts.imgContainer).slideDown("slow");
28.                     time = index+1;
29.                     intervalId = window.setInterval(autoRoll, opts.timeInterval);
30.                 }
31.             });
32.         });
33.     }
34.     function autoRoll(){
35.            if(time == $(opts.imgContainer).size()){
36.                 time = 0;
37.             }
38.             $(opts.imgContainer+":visible").slideUp("slow").parent().children(opts.titleContainer).removeClass(opts.activeClass);
39.             $(opts.imgContainer+":eq("+time+")").slideDown("slow").parent().children(opts.titleContainer).addClass(opts.activeClass);
40.             time++;
41.     }
42.      $.fn.pictureRoll.defaults = {
43.         container:"#pictureRoll",
44.         titleContainer:"#pictureRoll span",
45.         imgContainer:"#pictureRoll img",
46.         activeClass:"active",
47.         timeInterval:4000
48.     }
49. })(jQuery);