Доброго времени суток!
Есть слайдер, написанный с помощью jquery. Во всех браузерах отлично работает кроме оперы. Если через Opera Dragonfly обновит скрипты, то все начинает работать, отключаешь Opera Dragonfly, перестает. Подскажите в чем проблема.
Код подключения jquery и скрипта:
Код:
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"/>
<script src="slider.js" type="text/javascript"/> |
Код самого скрипта:
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 997;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Убираем прокрутку
$('#slidesContainer').css('overflow', 'hidden');
// Отмечаем первый круг желтым
$('#img').attr('src', 'images/circle2.png');
// Вставляем все .slides в блок #slideInner
slides.wrapAll('<div id="slideInner"></div>').css({
'float' : 'left',
'width' : slideWidth
});
// Устанавливаем ширину #slideInner, равную ширине всех слайдов
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Вставляем элементы контроля в DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl"></span>')
.append('<span class="control" id="rightControl"></span>');
// Прячем правую стрелку при загрузке скрипта
manageControls(currentPosition);
// Отлавливаем клик на класс .controls
$('.control').bind('click', function(){
// Определение новой позиции
currentPosition = ($(this).attr('id')=='rightControl')
? currentPosition+1 : currentPosition-1;
manageControls(currentPosition);
// Анимация
$('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)});
// Изменение кругов
if (currentPosition == 0)
{
$('#img').attr('src', 'images/circle2.png');
$('#img1').attr('src', 'images/circle.png');
$('#img2').attr('src', 'images/circle.png');
}
if (currentPosition == 1)
{
$('#img').attr('src', 'images/circle.png');
$('#img1').attr('src', 'images/circle2.png');
$('#img2').attr('src', 'images/circle.png');
}
if (currentPosition == 2)
{
$('#img').attr('src', 'images/circle.png');
$('#img1').attr('src', 'images/circle.png');
$('#img2').attr('src', 'images/circle2.png');
}
});
// Отлавливаем клик на кругах
$('#img').bind('click', function(){
currentPosition = 0;
manageControls(currentPosition);
$('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)});
$(this).attr('src', 'images/circle2.png');
$('#img1').attr('src', 'images/circle.png');
$('#img2').attr('src', 'images/circle.png');
});
$('#img1').bind('click', function(){
currentPosition = 1;
manageControls(currentPosition);
$('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)});
$(this).attr('src', 'images/circle2.png');
$('#img').attr('src', 'images/circle.png');
$('#img2').attr('src', 'images/circle.png');
});
$('#img2').bind('click', function(){
currentPosition = 2;
manageControls(currentPosition);
$('#slideInner').animate({'marginLeft' : slideWidth*(-currentPosition)});
$(this).attr('src', 'images/circle2.png');
$('#img').attr('src', 'images/circle.png');
$('#img1').attr('src', 'images/circle.png');
});
// Изменение кругов при наведении курсора
$('#img').mouseover (function(){
$(this).attr('src', 'images/circle1.png');
});
$('#img1').mouseover (function(){
$(this).attr('src', 'images/circle1.png');
});
$('#img2').mouseover (function(){
$(this).attr('src', 'images/circle1.png');
});
$('#img').mouseout (function(){
currentPosition == 0 ? $(this).attr('src', 'images/circle2.png') : $(this).attr('src', 'images/circle.png');
});
$('#img1').mouseout (function(){
currentPosition == 1 ? $(this).attr('src', 'images/circle2.png') : $(this).attr('src', 'images/circle.png');
});
$('#img2').mouseout (function(){
currentPosition == 2 ? $(this).attr('src', 'images/circle2.png') : $(this).attr('src', 'images/circle.png');
});
// manageControls: показывает или скрывает стрелки в зависимости от значения currentPosition
function manageControls(position){
// Спрятать левую стрелку, если это левый слайд
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
// Спрятать правую стрелку, если это последний слайд
if(position==numberOfSlides-1){ $('#rightControl').hide() }
else{ $('#rightControl').show() }
}
});