Здравствуйте, 3 дня, я мучаюсь над созданием прокрутки четырех картинок с текстом (jQuery и чуть JavaScript), не могу понять в чем может быть ошибка. Суть в том что все работает если находится на этой вкладке, как только я переключаюсь на любую другую, скрипт безбожно начинает глючить в итоге вообще останавливается. К сожалению пока не имел опыта работы с средствами отладки/контроля выполнения кода и опыта в написании кода (это видно ниже) мало, прошу более опытных посмотреть и сказать в каком направлении мне копать, может быть предложите вариант более разумный, мне кажется что все правильно, но не работает.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
//big-gallery
$('.big-gallery .box:first').css('display', 'none').addClass('clicked');
$('.big-gallery .line-top').after('<img src="' + $('.big-gallery .box:first img').attr('src') + '" width="1000" height="482" class="big">');
$('.big-gallery .inner').prepend('<div class="text"><span class="title"></span><p></p></div>');
$('.big-gallery .text .title').html($('.big-gallery .box:first .title').html()).next('p').html($('.big-gallery .box:first p').html());
$('.big-gallery .box .title a, .big-gallery .box img').live('click', function(e) {
e.preventDefault();
$('.big-gallery .box').removeClass('clicked');
$(this).parents('.box').addClass('clicked');
clickAction();
});
});
$(window).load(function() {
//big-gallery
$('.big-gallery').live('mouseover', function() { clearInterval(setIntId); });
$('.big-gallery').live('mouseout', function() { setIntId = setInterval('rotate()', 4000); });
setIntId = setInterval('rotate()', 4000);
});
si = 0;
function clickAction() {
var bigSrc = $('.big-gallery .big').attr('src');
var clickedSrc = $('.big-gallery .clicked img').attr('src');
var textTitle = $('.big-gallery .text .title').html();
var textP = $('.big-gallery .text p').html();
$('.big-gallery .big').before('<img src="' + clickedSrc + '" width="1000" height="482" class="big">');
$('.big-gallery .clicked img').before('<img src="' + bigSrc + '" width="168" height="81">');
$('.big-gallery .big:eq(1)').animate({'opacity': 0}, 300).queue(function() { $('.big-gallery .big:eq(1)').remove(); });
$('.big-gallery .clicked img:eq(1)').animate({'opacity': 0}, 300).queue(function() { $('.big-gallery .clicked img:eq(1)').remove(); });
$('.big-gallery .text .title').html($('.big-gallery .clicked .title').html());
$('.big-gallery .text p').html($('.big-gallery .clicked p').html());
$('.big-gallery .clicked .title').html(textTitle);
$('.big-gallery .clicked p').html(textP);
si = si + 1;
$('.si').text(si);
}
function rotate() {
if($('.big-gallery .clicked').next('.box').is('div')) {
$('.big-gallery .clicked').removeClass('clicked').next('.box').addClass('clicked');
clickAction();
} else {
$('.big-gallery .box').removeClass('clicked');
$('.big-gallery .box:eq(1)').addClass('clicked');
clickAction();
}
}
</script>
</head>
<body>
<div class="big-gallery">
<span class="line-top"></span>
<span class="line"></span>
<div class="inner">
<div class="box">
<span class="title"><a href="">ВЫСОКОКЛАССНАЯ КОМАНДА СПЕЦИАЛИСТОВ</a></span>
<img src="i/image/big-gallery1.jpg" width="168" height="81" class="active">
<p><a href="">Компания Fran — это не просто команда высококлассных специалистов вего дела в технических вопросах монтажа. Если Вас интересуют глянцевые натяжные потолки ПВХ или натяжные потолки ... >></a></p>
</div>
<div class="box">
<span class="title"><a href="">СОЗДАНИЕ СЛОЖНЫХ ГЕОМЕТРИЧЕСКИХ ФОРМ</a></span>
<img src="i/image/big-gallery2.jpg" width="168" height="81">
<p><a href="">1Компания Fran — это не просто команда высококлассных специалистов в вопросах производства натяжных потолков, но и настоящие мастера своего дела в технических толки ПВХ или натяжные потолки ... >></a></p>
</div>
<div class="box">
<span class="title"><a href="">ТЕХНОЛОГИЧНОЕ ПРОИЗВОДСТВО</a></span>
<img src="i/image/big-gallery1.jpg" width="168" height="81">
<p><a href="">Компания Fran — это не просто команда высококлассных потолки ... >></a></p>
</div>
<div class="box">
<span class="title"><a href="">ЭКСКЛЮЗИВНЫЕ ФАКТУРЫ ПЛЕНОК</a></span>
<img src="i/image/big-gallery2.jpg" width="168" height="81">
<p><a href="">Компания Fran — это не просто команда высококлассных специалистов в вопросах производства натяжных потолков, но и настоящие мастера своего дела в технических вопросах монтажа. Если Вас интересуют глянцевые натяжные потолки ПВХ или натяжные потолки ... >></a></p>
</div>
</div>
</div>
<p class="si">0</p>
<style>
/*big-gallery*/
.big-gallery { height:482px; overflow:hidden; clear:both; position:relative; z-index:2; width:1000px; margin:0 auto;}
.big-gallery .line-top, .big-gallery .line { width:1000px; height:1px; background:url(../i/sprite-long.png) no-repeat -1995px 0; position:absolute; top:0; left:0; z-index:4; display:block; z-index:5;}
.big-gallery .big { display:block; width:1000px; height:482px; position:absolute; top:0; left:0; z-index:3;}
.big-gallery .line { top:296px;}
.big-gallery .inner { width:669px; height:185px; background:rgb(0, 0, 0); background:rgba(0, 0, 0, 0.7); position:absolute; top:297px; left:0; z-index:5; padding:0 0 0 331px;}
.ie7 .big-gallery .inner, .ie8 .big-gallery .inner { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000); zoom:1;}
.big-gallery .text { position:absolute; top:0; left:0; width:255px; padding:18px 21px 0 55px; font-size:11px; line-height:13px; color:#fff; float:left;}
.big-gallery .text .title { display:block; text-transform:uppercase; font-size:14px; line-height:17px; padding:0 0 7px; font-weight:700;}
.big-gallery .text p a, .big-gallery .text .title a, .big-gallery .box .title a { color:#fff; text-decoration:none;}
.big-gallery .text.hover a { text-decoration:underline;}
.big-gallery .text p { text-align:justify;}
.big-gallery .box { float:left; width:169px; padding:0 0 0 37px; position:relative; z-index:3;}
.big-gallery .hide { position:absolute; top:0; left:331px; z-index:2;}/*331-537-743*/
.big-gallery .box .title { display:block; font-size:11px; color:#fff; line-height:13px; text-transform:uppercase; padding:19px 0 0; height:28px; cursor:pointer; overflow:hidden;}
.big-gallery .box p { display:none;}
.big-gallery .box img { display:block; width:167px !important; height:81px; cursor:pointer; border:solid 1px #f1f1f0; border-radius:2px; position:absolute; top:63px; left:37px; z-index:3;}
.big-gallery .box.hover img { border:solid 1px #cd221c;}
</style>
</body>
</html>
