Question

js问题，大神请进，指教一下小白

$(document).ready(function() {
$(function(){
$("#tpqh span:first").addClass("spatb");
$("#imgs ul").not(":first").hide();
$("#tpqh span").click(function(){
$(this).addClass("spatb").siblings().removeClass("spatb");
var index = $("#tpqh span").index(this);
$("#imgs ul").eq(index).show().siblings().hide();
})
})
//自动轮换代码
$(function(){
$("#tpqh ul:first").css('display','block');
autoScroll();
contentHover();
currentHover();

});
var i=-1; //第i+1个tab开始;
var offset = 5000; //轮换时间
var timer = null;
function autoScroll(){
var n = $("#tpqh span").length - 1;
i++;
if(i > n)
i=0;
slide(i);
timer = window.setTimeout(autoScroll,offset);
}
function slide(i){
$("#tpqh span").eq(i).addClass("spatb").siblings().removeClass("spatb");
$("#imgs ul").eq(i).show().siblings().hide();
}
function currentHover(){
$("#tpqh span").hover(function(){
if(timer){
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
},function(){
timer = window.setTimeout(autoScroll,offset);
this.blur();
return false;
})
}
function contentHover(){
$("#imgs ul").hover(function(){
if(timer){
clearTimeout(timer);
i = $(this).prevAll().length;
slide(i);
}
},function(){
timer = window.setTimeout(autoScroll,offset);
this.blur();
return false;
})
}
});

这个是一图片轮播的特效代码。我现在需要使用多个这样的效果，由于完全是js小白，所以我实现功能的时候是复制多一次代码，再把里面对应的id、tag一一改过来。这样的话代码就很重复。我知道可以写成一个函数什么之类的，然后用简单的调用把对应的id、tag值传给这个函数就可以的，我尝试了多次，但始终是太小白了，最后没能成功。求大神帮忙把这段代码封装成一个函数，和调用方法。（最好能有注释，这样我可以学习一下）。谢谢
回453455492大神的
IE6下仍不正常。时间问题，开始加载页面时空白设置时间长度再显示。

Answer 1

(function($) {
  var methods = {
    init: function(setting) {
      return this.each(function() {
        var $this = $(this);
        var defaults = {
          imgsSelector: "#imgs",
          imgItemSelector:"ul",
          itemSelector:"span",
          itemClassName:"spatb"
        };
        setting=$.extend({},defaults,setting);

        $this.find(setting.itemSelector).first().addClass(setting.itemClassName);
        $(setting.imgsSelector).find(setting.imgItemSelector).not(":first").hide();
        $this.find(setting.itemSelector).click(function() {
          $(this).addClass(setting.itemClassName).siblings().removeClass(setting.itemClassName);
          var index = $this.find(setting.itemSelector).index(this);
          $(setting.imgsSelector).find(setting.imgItemSelector).eq(index).show().siblings().hide();
        })
        $this.find(setting.imgItemSelector).first().css('display', 'block');
        autoScroll();
        contentHover();
        currentHover();
        var i = -1; //第i+1个tab开始;
        var offset = 5000; //轮换时间
        var timer = null;

        function autoScroll() {
          var n = $this.find(setting.itemSelector).length - 1;
          i++;
          if (i > n)
            i = 0;
          slide(i);
          timer = window.setTimeout(autoScroll, offset);
        }

        function slide(i) {
          $this.find(setting.itemSelector).eq(i).addClass("spatb").siblings().removeClass("spatb");
          $(setting.imgsSelector).find(setting.imgItemSelector).eq(i).show().siblings().hide();
        }

        function currentHover() {
          $this.find(setting.itemSelector).hover(function() {
            if (timer) {
              clearTimeout(timer);
              i = $(this).prevAll().length;
              slide(i);
            }
          }, function() {
            timer = window.setTimeout(autoScroll, offset);
            this.blur();
            return false;
          })
        }

        function contentHover() {
          $(setting.imgsSelector).find(setting.imgItemSelector).hover(function() {
            if (timer) {
              clearTimeout(timer);
              i = $(this).prevAll().length;
              slide(i);
            }
          }, function() {
            timer = window.setTimeout(autoScroll, offset);
            this.blur();
            return false;
          })
        }

      });
    },
  };
  $.fn.jSlider=function(setting){
    return methods.init.apply(this, arguments);
  }
})(jQuery)

$(function() {
  $("#tpqh").jSlider({
    imgsSelector: "#imgs",
    imgItemSelector:"ul",
    itemSelector:"span",
    itemClassName:"spatb"
  });
});

追问

非常感谢。可以使用。不过，全部的切换时间都相同的，怎么加个切换时间的数传递过去的?让每个的切换时间不一样。
另外，在IE6下无效。

追答

继续回答有字数限制，我就不贴代码了，你把offset这个变量放到defaults里面，然后引用的地方改成setting.offset就可以了。你原来的代码在IE6下可以使用吗？你试下，因为不知道你html代码结构是什么样的，这个代码我没有试过

追问

原来的代码可以在IE6用的。
你可以改了文件，把文件上传上来就可以了。

追答

你把html代码贴出来，我在ie6下试下

追问

1234 5
●●●●●百度字数短死了。

追答

ietester ie6 测试通过

Answer 2

一般做法不是改js代码，而是修改css。

做法有问题。

$("#imgs ul")这样的匹配可以换成css伪类匹配。。