Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.07.2012, 15:50
Аспирант
Отправить личное сообщение для Heidel Посмотреть профиль Найти все сообщения от Heidel
 
Регистрация: 11.06.2012
Сообщений: 71

Создать слайдер
Сейчас на сайте сделан такой слайдер http://n.inetech.ru/ (верхняя картинка в декоративной рамке).
Интересует, можно ли средствами jQuery сделать смену картинок наподобие того как это сделано на этой странице http://clinic-kaluga.ru/ (там сделан flash)/
Как реализовать подобное средствами jQuery ?
Ответить с цитированием
  #2 (permalink)  
Старый 09.07.2012, 16:21
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Heidel,
в jQuery это эффект fadeIn - fadeOut
тады слайдер просто не нужен - картинки располагаются друг за другом с position: absolute;
и в цикле даём эти команды предыдущей fadeOut следущей fadeIn
Ответить с цитированием
  #3 (permalink)  
Старый 09.07.2012, 16:32
Аспирант
Отправить личное сообщение для Heidel Посмотреть профиль Найти все сообщения от Heidel
 
Регистрация: 11.06.2012
Сообщений: 71

Deff,
а на пример какой-нибудь можешь ссылку скинуть?
изображения должны менять сами по себе, а не по клику на элементе.

Последний раз редактировалось Heidel, 09.07.2012 в 16:35.
Ответить с цитированием
  #4 (permalink)  
Старый 09.07.2012, 18:03
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Ну так:
на коленке:
<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>

Последний раз редактировалось Deff, 10.07.2012 в 12:30.
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2012, 16:12
Интересующийся
Отправить личное сообщение для zemelea Посмотреть профиль Найти все сообщения от zemelea
 
Регистрация: 19.02.2010
Сообщений: 10

спасибо большое, то что надо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить URL, в случае совпадения с условиями - создать div? Intruder Общие вопросы Javascript 3 27.05.2012 02:10
jquery слайдер, анимация при переключении вкладки KiTaeZa Events/DOM/Window 1 05.09.2011 20:52
Нужно отредактировать слайдер glavkot Работа 0 22.08.2011 14:14
jQuery UI Slider - как синхронизировать слайдер со значнием? frightened jQuery 0 24.07.2011 00:19
Создать узел <img> внутри <div> glutton Events/DOM/Window 1 09.11.2009 14:41