Как сделать несколько полей подсказок для слайдера
Здравствуйте. Есть такой код для слайдера
(function($){ $.fn.s3Slider = function(vars) { var element = this; var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000; var current = null; var timeOutFn = null; var faderStat = true; var mOver = false; var items = $("#" + element[0].id + "Content ." + element[0].id + "Image"); var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span"); items.each(function(i) { $(items[i]).mouseover(function() { mOver = true; }); $(items[i]).mouseout(function() { mOver = false; fadeElement(true); }); }); var fadeElement = function(isMouseOut) { var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut; thisTimeOut = (faderStat) ? 10 : thisTimeOut; if(items.length > 0) { timeOutFn = setTimeout(makeSlider, thisTimeOut); } else { console.log("Poof.."); } } var makeSlider = function() { current = (current != null) ? current : items[(items.length-1)]; var currNo = jQuery.inArray(current, items) + 1 currNo = (currNo == items.length) ? 0 : (currNo - 1); var newMargin = $(element).width() * currNo; if(faderStat == true) { if(!mOver) { $(items[currNo]).fadeIn((timeOut/6), function() { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } else { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { faderStat = false; current = items[currNo]; if(!mOver) { fadeElement(false); } }); } }); } } else { if(!mOver) { if($(itemsSpan[currNo]).css('bottom') == 0) { $(itemsSpan[currNo]).slideDown((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } else { $(itemsSpan[currNo]).slideUp((timeOut/6), function() { $(items[currNo]).fadeOut((timeOut/6), function() { faderStat = true; current = items[(currNo+1)]; if(!mOver) { fadeElement(false); } }); }); } } } } makeSlider(); }; })(jQuery); Вот это вставляется в шапку между <head>: $(document).ready(function() { $('#s3slider').s3Slider({ timeOut: 3000 }); }); и вот такой код html <div id="s3slider"> <ul id="s3sliderContent"> <li class="s3sliderImage"> <img src="1.jpg" /> <span>Подсказка</span> </li> <li class="s3sliderImage"> <img src="2.jpg" /> <span>Подсказка</span> </li> <div class="clear s3sliderImage"></div> </ul> </div> css Вопрос: Как можно сделать так, чтобы было несколько полей подсказок к изображению? Конкретно, чтобы были поля: <span>Подсказка1</span> <span>Подсказка2</span> <span>Подсказка3</span> Если просто дублировать, то слайдер не работает, вернее анимация этих подсказок. Хочу присвоить разные стили к всем трем полям, чтобы эти три подсказки выходили в разных местах. Помогите пожалуйста советом?! |
<span style="display:inline-block"> <div class=Tol1>Подсказка<div> <div class=Tol2>Подсказка<div> <div class=Tol3>Подсказка<div> </span> |
Часовой пояс GMT +3, время: 12:48. |