Создать слайдер
Сейчас на сайте сделан такой слайдер http://n.inetech.ru/ (верхняя картинка в декоративной рамке).
Интересует, можно ли средствами jQuery сделать смену картинок наподобие того как это сделано на этой странице http://clinic-kaluga.ru/ (там сделан flash)/ Как реализовать подобное средствами jQuery ? |
Heidel,
в jQuery это эффект fadeIn - fadeOut тады слайдер просто не нужен - картинки располагаются друг за другом с position: absolute; и в цикле даём эти команды предыдущей fadeOut следущей fadeIn |
Deff,
а на пример какой-нибудь можешь ссылку скинуть? изображения должны менять сами по себе, а не по клику на элементе. |
Ну так:
на коленке: <script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script> <style type="text/css"> #Obr { background-clip:border-box; border:transparent solid 34px; overflow: hidden; width:444px; height:192px; position:relative; } div.WRAP { border:1px solid red; background-color:#A883AF; display:inline-block; } div.WRAP img.picture_mask{ position:absolute; margin-left:-3px; z-index:100; } #Obr img.slide{ position:absolute; display:none; } #Obr img.slide:first-child{ display:block; } </style> <div class="WRAP"> <img class='picture_mask' src="http://n.inetech.ru/images/slider.png"/> <div id="Obr"> <img class='slide' src="http://s1.uploads.ru/i/t4EZ0.png"/> <img class='slide' src="http://s1.uploads.ru/i/udkzn.png"/> <img class='slide' src="http://s1.uploads.ru/i/K64eT.png"/> <img class='slide' src="http://s1.uploads.ru/i/RNnTx.jpg"/> </div> </div> <script type="text/javascript"> $(document).ready(function(){ var slideArr=[] $("#Obr img.slide").each(function(i){ slideArr[i]=$(this); }); var LengSlide = slideArr.length; var SLTime = 4400; function Circle(st) { var v = st-1; if(st==LengSlide)st=0; if(st==0)var v=LengSlide-1;i=st; slideArr[v].fadeOut(SLTime-400) slideArr[i].fadeIn(SLTime, function() { setTimeout(function(){$("#Obr img.slide").stop(true,true); st++; Circle(st); },323) }); } Circle(1) }); </script> |
спасибо большое, то что надо!
|
Часовой пояс GMT +3, время: 18:05. |