鼠標移開之后,自動切換默認是之前的,并不是鼠標之后的下一位
jQuery(document).ready(function() {
?? ?var t = $(".dox li"),
?? ??? ?b = $(".dox div");
?? ?var index = 0;
?? ?var timer = null;
?? ?// if (t.length != b.length) return;
?? ?for (var i = 0; i < t.length; i++) {
?? ??? ?t[i].id = i;
?? ??? ?$(t[i]).mouseover(function() {
?? ??? ??? ?var that = this;
?? ??? ??? ?clearInterval(timer);
?? ??? ??? ?timer = setTimeout(function() {
?? ??? ??? ??? ?for (var j = 0; j < b.length; j++) {
?? ??? ??? ??? ??? ?b.css("display", "none");
?? ??? ??? ??? ??? ?t.removeClass();
?? ??? ??? ??? ?};
?? ??? ??? ??? ?$(that).addClass('hover');
?? ??? ??? ??? ?$(b[that.id]).css("display", "block");
?? ??? ??? ?}, 150);
?? ??? ?});
?? ??? ?$(t[i]).mouseout(function() {
?? ??? ??? ?timer = setInterval(function() {
?? ??? ??? ??? ?index++;
?? ??? ??? ??? ?if (index >= t.length) {
?? ??? ??? ??? ??? ?index = 0;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?for (var j = 0; j < b.length; j++) {
?? ??? ??? ??? ??? ?b.css("display", "none");
?? ??? ??? ??? ??? ?t.removeClass();
?? ??? ??? ??? ?};
?? ??? ??? ??? ?$(t[index]).addClass('hover');
?? ??? ??? ??? ?$(b[index]).css("display", "block");
?? ??? ??? ?}, 2000);
?? ??? ?});
?? ?};
?? ?if (timer) {
?? ??? ?clearInterval(timer);
?? ??? ?timer = null;
?? ?}
?? ?timer = setInterval(function() {
?? ??? ?index++;
?? ??? ?if (index >= t.length) {
?? ??? ??? ?index = 0;
?? ??? ?}
?? ??? ?for (var j = 0; j < b.length; j++) {
?? ??? ??? ?b.css("display", "none");
?? ??? ??? ?t.removeClass();
?? ??? ?};
?? ??? ?$(t[index]).addClass('hover');
?? ??? ?$(b[index]).css("display", "block");
?? ??? ?console.log(index);
?? ?}, 2000);
});
2016-02-19
鼠標劃過標簽的時候并沒有修改index的值,這樣當鼠標離開當前標簽后index的值是上次自動播放的index+1。解決辦法是在鼠標劃過標簽后,把index的值修改為標簽的id值,這樣下次自動播放時就會從劃過標簽的下一個標簽開始。代碼如上,添加的代碼在倒數(shù)第二行。