Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #31 (permalink)  
Старый 24.01.2013, 21:33
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

IgorArhangel,
Ясн - я думал ротированием
Ответить с цитированием
  #32 (permalink)  
Старый 25.01.2013, 13:33
Интересующийся
Отправить личное сообщение для IgorArhangel Посмотреть профиль Найти все сообщения от IgorArhangel
 
Регистрация: 13.01.2013
Сообщений: 29

Сообщение от Deff
Ясн - я думал ротированием
Та нет зачем трудности!
Буду ждать Вас
Ответить с цитированием
  #33 (permalink)  
Старый 25.01.2013, 21:07
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

IgorArhangel,
Седни не успею, доделывать буду завтра,
Но скрытия и упразрачнивания скорее не будет, картинки будут перекатываться,
одна позиция сменяться другой и скрываться за краем обрамляющего блока. Все это из-за требования центрального блока и возможности скрытия боковых при мелком экране.
Ответить с цитированием
  #34 (permalink)  
Старый 27.01.2013, 09:41
Интересующийся
Отправить личное сообщение для IgorArhangel Посмотреть профиль Найти все сообщения от IgorArhangel
 
Регистрация: 13.01.2013
Сообщений: 29

Сообщение от Deff
Гляньте, что отрыл => http://www.idangero.us/cs/
(Там справо радио кнопки -выбор эффекта)
Статья => http://habrahabr.ru/post/133205/
Я это уже давно видел!
Это не то что мне нужно...
Мне такие эффекты не нужны!
мне нужны тупо переключатели на все слайды
Ответить с цитированием
  #35 (permalink)  
Старый 27.01.2013, 12:57
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

IgorArhangel,
делаю... неохотно, поскольку не выспался
Ответить с цитированием
  #36 (permalink)  
Старый 28.01.2013, 21:28
Интересующийся
Отправить личное сообщение для IgorArhangel Посмотреть профиль Найти все сообщения от IgorArhangel
 
Регистрация: 13.01.2013
Сообщений: 29

Сообщение от Deff
делаю... неохотно, поскольку не выспался
Я очень вам признателен.
Если у Вас нет времение опишите логику и примерно как функции написать?

я пока что сделал просто ротатор. картинки на фоне. они меняются. мне не хватает только переключателей внизу.

Как я понял необходимо каждой картинке присвоить определенный переключатель.

А вот как реализовать пока затрудняюсь
Ответить с цитированием
  #37 (permalink)  
Старый 30.01.2013, 00:00
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

Вроде сделал, мне картинки нужны,
Выложите пару ссылок на картинки - залить можно сюда, http://uploads.ru/
поскольку margin - cущественно влияет на центрирование
Ответить с цитированием
  #38 (permalink)  
Старый 31.01.2013, 09:51
Интересующийся
Отправить личное сообщение для IgorArhangel Посмотреть профиль Найти все сообщения от IgorArhangel
 
Регистрация: 13.01.2013
Сообщений: 29

Вылаживаю
Тут 6 картинок png
Ответить с цитированием
  #39 (permalink)  
Старый 31.01.2013, 12:48
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,220

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Слайд шоу на библиотеке jQuery</title>


<style type="text/css">
body {
  margin:0;
  padding; 0;
}

#Wrap {
  border:red solid 1px;
  width: 100%;
  overflow-x:hidden;
  height:auto;
  margin:0;
  padding; 0;
  text-align:left;
  position:relative;
}

#slideWrp {
  height:356px!important;
  overflow-x:hidden;
  display:inline-block;
  white-space:nowrap!important;
  padding:0;
  margin:0;
  border:red solid 1px;
}

.slide {
  float:left;
  height:356px!important;
  width:577px;
  margin:0 -1px 0 -1px;
  padding:0;
  border:transparent solid 1px;
}
.slide img{
  margin-left:-47px;
}

#Wrap {
 max-width: 1470px;/* max-width = 490px*3 (Три ширины слайд картинок);*/
}

#indexActive{
  float:right;
  margin-right:30px;
  margin-top:10px;
}
span[id^="active_Ind"]{
  cursor:pointer;
  float:right;
  border:blue solid 2px;
  height:6px;
  width:6px;
  margin:6px;
}
span[id^="active_Ind"].active{
  border: red solid 2px;
  float:right;
}
</style>



<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

   var slideWIDTH = 490;
   var SLlength = $(".slide").length;
   $('#slideWrp').width(490*SLlength)
   var ReSlide = (SLlength - (1-SLlength%2)); //Тест на четность



function MarginSet(){
   var margLeft = parseInt(($("#Wrap").width()-ReSlide*(1+$(".slide:first").width()))/2)+'px';
   $("#slideWrp").css({'margin-left':margLeft})
}

  MarginSet();
$(window).resize(function(){
  MarginSet();
});

//===========================//

   var a=$('#slideWrp');
   var b=a.width;
   a.css({'width':b})
   $(".slide").each(function(i){
     $(this).attr('id','Slide-'+i);
     $("#indexActive").prepend('<span id="active_Ind_'+i+'"></span>')
   });$("#indexActive #active_Ind_0").addClass('active');


var  starT=true;
function ReplacSL(N){//alert(N)
         var slide=$(".slide:first");
         var W = parseInt(slide.width());
         var time = parseInt(410/Math.sqrt((N+1)))
         var marginLft = slide.css('margin-left');
         slide.animate({'margin-left':'-'+W+'px'},time,"linear",
         function(){
            slide.appendTo('#slideWrp');slide.css({'margin-left':marginLft});
            N--;if(N){ReplacSL(N);} else {starT=true;}
         });

}

function slideReplac(a,b){
     if(!starT) return;
     starT=false;
     if(a!=b){var N=b-a;
     if(+a>+b)N=b+SLlength-a;
        ReplacSL(N);
     }
}
var s =  SLlength - parseInt(ReSlide/2)
for(var i=0; i<s; i++){
$(".slide:first").appendTo('#slideWrp')
}

   $("#indexActive > span[id^='active_Ind']").click(function(){
     UserNoActSlide=false;
     var startI = +$("#indexActive > span.active").attr('id').replace('active_Ind_','');
     $("#indexActive > span.active").removeClass('active');
     $(this).addClass('active');
     var nextI = +$(this).attr('id').replace('active_Ind_','');
     slideReplac(startI,nextI)

   });

// АВТОПРОКРУТКА
   var intervalAutoId;
   var UserNoActSlide=true;
   $("#Wrap").bind('mouseenter mousemove',function(){ //Cброс автозапуска по наведению
      UserNoActSlide=false;//alert("A")
      clearInterval(intervalAutoId);
      UserNoActSlide=false;
    }).mouseleave(function(){                     //Разрешаем автозапуск по сходу курсора
      clearInterval(intervalAutoId);
      UserNoActSlide=true;
    });


     setInterval(function(){                  //Периодический тест активности и автозапуск
       if(UserNoActSlide){
         clearInterval(intervalAutoId);
         intervalAutoId=setInterval(function(){
             UserNoActSlide=false;
             var id= $("span[id^='active_Ind_'].active").attr('id');
             id = (+(id.replace('active_Ind_',''))+SLlength- 1)% SLlength;
             $('#active_Ind_'+ id).click();
             },4000); // Интервал автопрокрутки
        }
       
     },10000);        // Интервал Теста;


});
</script>
</head>

<body style="margin:0;padding:0;height:100%;width:100%;top:0;background: #FFFFFF url(http://hostjs-mybb2011.narod.ru/img/bg000000.gif) repeat-x 50%;">

      <div style="padding:40px 40px;width:90%;margin:0 auto;background-color:#fff;">



<div id="Wrap">


   <div id="slideWrp">
      <div class="slide"><img src="http://s3.uploads.ru/UnR4O.png"/></div>
      <div class="slide"><img src="http://s3.uploads.ru/xd2BS.png"/></div>
      <div class="slide"><img src="http://s3.uploads.ru/oPsTG.png"/></div>
      <div class="slide"><img src="http://s3.uploads.ru/aGCih.png"/></div>
      <div class="slide"><img src="http://s2.uploads.ru/zrZwu.png"/></div>
      <div class="slide"><img src="http://s3.uploads.ru/ej8UB.png"/></div> <!---->
   </div>

   <div id="indexActive"></div>
</div>



      </div>
</body>
</html>
<!-- //Конец страницы //-->

Последний раз редактировалось Deff, 31.01.2013 в 12:54.
Ответить с цитированием
  #40 (permalink)  
Старый 31.01.2013, 16:12
Интересующийся
Отправить личное сообщение для IgorArhangel Посмотреть профиль Найти все сообщения от IgorArhangel
 
Регистрация: 13.01.2013
Сообщений: 29

Deff,
Спасибо огромное!
То что надо..
Немного подпилю..

Супер!!!!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установка слайд шоу CJ Flashy Slide Show 1.1.3 vadimos_gre Элементы интерфейса 0 29.10.2012 13:38
Слайд шоу, видеозаписи 123456789igor Общие вопросы Javascript 1 27.08.2012 15:03
Простой слайд картинок jQuery cssme jQuery 1 11.05.2011 16:41
Как сделать слайд шоу mdiimas jQuery 6 27.08.2010 19:40
проблема со слайд шоу, помогите пожалуйста. Ketch_Ozzy Общие вопросы Javascript 5 15.05.2009 22:34