• Страница 1 из 1
  • 1
Форум Studio AD » Сайтостроение » Общий форум по Javascript » Слайдер изображений
Слайдер изображений
vova121212
Дата: Среда, 30.06.2010, 10:00 | Сообщение # 1
Группа: Удаленные
Как сделать как у Aleko на форуме изображения двигаются.
Прикрепления: 9551407.jpg (90.4 Kb)
  
iNoak
Дата: Среда, 30.06.2010, 10:02 | Сообщение # 2
молчун
Группа: Проверенные
Пользователь №: 527
Сообщений: 36
Получено оценок: 4
vova121212, CTRL+U. Но Алеко не дурак, от таких как ты, код попрятал куда подальше. Так что, вариант о рипе идти не может. Скрипта этого в паблике нет, так что, забудь о нём.

[ Мой блог | Получить WM-аттестат | Дешёвые хостинг ]
  
UnderShot
Дата: Среда, 30.06.2010, 10:24 | Сообщение # 3
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
Quote (vova121212)
изображения двигаются
В адрессную строку введи
Code
javascript:setInterval(function(){fslider.scrol("left")},10);void(0)
И картинки начинают двигаться!


Очень важная тема!
Filmzona — онлайн фильмы.
  
DSC
Дата: Среда, 30.06.2010, 10:30 | Сообщение # 4
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
iNoak, почему же нету, всё просто, нужно подключить вот это к себе на сайт в head:
Code
<script type="text/javascript" src="http://studioad.ru/sAD.js"></script>

А затем перед </body> вставить это:
Code
<style type='text/css'>#tutswrap{height:123px;margin:10px 0 8px;overflow:hidden;width:763px;white-space:nowrap;font-size:0}#tutswrap div{display:inline-block}#tutswrap div a{font-size:0;display:block;float:left;background:url(http://studioad.ru/images/forum/scrollp.png) 4px 0 no-repeat;height:120px;width:153px}#tutswrap div img{margin:5px 0 0 9px}#hiddentuts{display:none}#arrow_left,#arrow_right{top:39px;display:block;cursor:pointer;height:63px;width:45px;position:absolute;background:url(http://studioad.ru/images/forum/scrollb.png)}#arrow_left:hover{background-position:0 0}#arrow_right:hover{background-position:46px 0}#arrow_left{left:-54px;background-position:0 63px}#arrow_right{left:772px;background-position:46px 63px}#arrowwrap{height:0;position:relative}#arrowwrap,#tutswrap{*display:none}</style><div id=hiddentuts><div id=arrowwrap><a id=arrow_left onclick='fslider.scrol("right")' title='Мотать влево'></a><a id=arrow_right onclick='fslider.scrol("left")' title='Мотать вправо'></a></div><div id=tutswrap>

<div><a href='http://studioad.ru/blog/2010-06-03-116' title='Иконка солнца'><img src='http://studioad.ru/tutorials/sun.jpg'/></a></div>
<div><a href='http://studioad.ru/forum/24-1068-1' title='Иллюстрация помады'><img src='http://studioad.ru/tutorials/gloss.jpg'/></a></div>
<div><a href='http://studioad.ru/forum/25-475-1' title='Стакан пива'><img src='http://studioad.ru/tutorials/glass.jpg'/></a></div>
<div><a href='http://studioad.ru/forum/24-463-1' title='Meatboy'><img src='http://studioad.ru/tutorials/mb.gif'/></a></div>
<div><a href='http://studioad.ru/forum/24-456-1' title='Рисуем кисть'><img src='http://studioad.ru/tutorials/bru.jpg'/></a></div>
<div><a href='http://studioad.ru/forum/24-367-1' title='Как правильно раскрасить мангу...'><img src='http://studioad.ru/tutorials/manga.jpg'/></a></div>
<div><a href='http://studioad.ru/forum/24-420-1' title='Шесть отличных текстовых эффектов'><img src='http://studioad.ru/tutorials/6texteffects.jpg'/></a></div>

<div><a href='http://studioad.ru/forum/24-298-1' title='Создаем реалистичное освещение'><img src='http://studioad.ru/tutorials/reallight.jpg'/></a></div>
<div><a href='http://studioad.ru/forum/24-323-1' title='Рисуем imac'><img src='http://studioad.ru/tutorials/imac.jpg'/></a></div>
<div><a href='http://studioad.ru/forum/24-68-1' title='Создание иконки Google Chrome'><img src='http://studioad.ru/tutorials/chrome.jpg'/></a></div>
<div><a href='http://studioad.ru/forum/24-318-1' title='Рисуем логотип Youtube'><img src='http://studioad.ru/tutorials/youtube.jpg'/></a></div>

</div></div><script type='text/javascript'>eval((function(__){return 'F P=D.U("@O")[13],O=J.9("O"),11=J.9("O"),Q=J.9("Q");Q.setAttribute("R","5");Q.G=D.U("#hiddentuts").G;P.L.A(O,P);O.L.A(11,O);11.G=\'<Q R="5" Y="gTableTop"><10 H="float: W;" Y="gTopCornerRight"></10>Новые уроки PhotoShop</Q>\';O.K(Q);2={I:S,B:"",3:7(){F c=D.U("#N").getElementsByTagName("10");2.B=c;15(2.B.M<6){2.I=X}for(F b=0;b<c.M;b++){c[b].H.margin=0;15(b>4){c[b].H.filter="alpha(8=\'0\')";c[b].H.8=0}}},scrol:7(l){F j=D.U("#N");15(2.I){2.I=X;F h=400;F g="T";F i="T";switch(l){12"left":F k=2.B[0],d=2.B[5];D.C(i,k,{8:0,E:-Z},h,7(){D.C(g,d,{8:14},h,7(){2.I=S;2.3()});j.K(k)});V;12"W":F k=2.B[4],d=2.B[0],m=2.B[2.B.M-1];j.A(m,d);m.H.E=-Z+"px";D.C(i,k,{8:0,marginRight:-Z},h);D.C(i,m,{E:0},h,7(){D.C(g,m,{8:14},h,7(){2.I=S;2.3()})});V}}}};2.3();D.tip()'.replace(/\w+/g,function(_){return __[-/[a-z]/.test(_)|parseInt(_,36)]||_})})('||fslider|scrolprepare||||function|opacity|createElement|insertBefore|divs|animate|sAD|marginLeft|var|innerHTML|style|anim|document |appendChild|parentNode|length|tutswrap|tr|ourtr|td|colspan|true|smooth|get|break|right|false|class|153|div|tr2|case||100|if'.split('|')))</ script>


aka Latro
  
WRC
Дата: Среда, 30.06.2010, 10:35 | Сообщение # 5
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11
DSC, уверен что браузер не зависнет? :D

Устраняем баг при просмотре материала
  
DSC
Дата: Среда, 30.06.2010, 10:42 | Сообщение # 6
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
WRC, не, ну оно понятно, что Алеко поставил проверку адреса, но в таком случае посоветую ему взять тултипы Алеко, get Алеко и анимацию Алеко, и уже подрихтовать вот этот код:
Code
var ourtr = document.getElementsByName("tr")[13],
tr = document.createElement("tr"),
tr2 = document.createElement("tr"),
td = document.createElement("td");
td.setAttribute("colspan", "5");
td.innerHTML = document.getElementById("hiddentuts").innerHTML;
ourtr.parentNode.insertBefore(tr, ourtr);
tr.parentNode.insertBefore(tr2, tr);
tr2.innerHTML = '<td colspan="5" class="gTableTop"><div style="float: right;" class="gTopCornerRight"></div>Новые уроки PhotoShop</td>';
tr.appendChild(td);
fslider = {
   anim: true,
   divs: "",
   scrolprepare: function() {
     var c = document.getElementById("tutswrap").getElementsByTagName("div");
     fslider.divs = c;
     if (fslider.divs.length < 6) {
       fslider.anim = false
     }
     for (var b = 0; b < c.length; b++) {
       c[b].style.margin = 0;
       if (b > 4) {
         c[b].style.filter = "alpha(opacity='0')";
         c[b].style.opacity = 0
       }
     }
   },
   scrol: function(l) {
     var j = sAD.get("#tutswrap");
     if (fslider.anim) {
       fslider.anim = false;
       var h = 400;
       var g = "smooth";
       var i = "smooth";
       switch (l) {
       case "left":
         var k = fslider.divs[0],
         d = fslider.divs[5];
         sAD.animate(i, k, {
           opacity: 0,
           marginLeft: -153
         },
         h,
         function() {
           sAD.animate(g, d, {
             opacity: 100
           },
           h,
           function() {
             fslider.anim = true;
             fslider.scrolprepare()
           });
           j.appendChild(k)
         });
         break;
       case "right":
         var k = fslider.divs[4],
         d = fslider.divs[0],
         m = fslider.divs[fslider.divs.length - 1];
         j.insertBefore(m, d);
         m.style.marginLeft = -153 + "px";
         sAD.animate(i, k, {
           opacity: 0,
           marginRight: -153
         },
         h);
         sAD.animate(i, m, {
           marginLeft: 0
         },
         h,
         function() {
           sAD.animate(g, m, {
             opacity: 100
           },
           h,
           function() {
             fslider.anim = true;
             fslider.scrolprepare()
           })
         });
         break
       }
     }
   }
};
fslider.scrolprepare();
sAD.tip()


aka Latro
  
DSC
Дата: Среда, 30.06.2010, 10:44 | Сообщение # 7
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
DSC, не, ну всем и так понятно что он этого не сделает, но помочь я ничем не могу помогать я более не буду, т.к. и так показал и рассказал уже достаточно!!

aka Latro
  
vova121212
Дата: Среда, 30.06.2010, 10:47 | Сообщение # 8
Группа: Удаленные
iNoak, Я вообще не говорю про рип или как у алеко мне нужно что бы картинки двигались я превел пример как у Aleko
  
WRC
Дата: Среда, 30.06.2010, 10:48 | Сообщение # 9
говорун
Группа: Проверенные
Пользователь №: 223
Сообщений: 149
Получено оценок: 11
ещё можно с ucoz спереть jq скрипт...
vova121212, только не боись что он там по вертикали... в настройках функции всё это настраивается...


Устраняем баг при просмотре материала
  
vova121212
Дата: Среда, 30.06.2010, 11:03 | Сообщение # 10
Группа: Удаленные
WRC, да иди ты лесом
  
UnderShot
Дата: Среда, 30.06.2010, 11:32 | Сообщение # 11
оратор
Группа: Модераторы
Пользователь №: 45
Сообщений: 923
Получено оценок: 85
DSC, разговариваем сами с собой?

Очень важная тема!
Filmzona — онлайн фильмы.
  
vova121212
Дата: Среда, 30.06.2010, 11:35 | Сообщение # 12
Группа: Удаленные
UnderShot, :D
  
iNoak
Дата: Среда, 30.06.2010, 11:39 | Сообщение # 13
молчун
Группа: Проверенные
Пользователь №: 527
Сообщений: 36
Получено оценок: 4
Quote (vova121212)
то бы картинки двигались

Ну тогда вот тебе, движущиеся картинки... :D


[ Мой блог | Получить WM-аттестат | Дешёвые хостинг ]
  
Raiderr
Дата: Среда, 30.06.2010, 11:48 | Сообщение # 14
болтун
Группа: Проверенные
Пользователь №: 673
Сообщений: 349
Получено оценок: 26
в head:
Code

<script type="text/javascript" src="http://raiderchop.ru/misc/js/easySlider1.5.js"></script>
<script type="text/javascript">
  $(document).ready(function(){   
   $("#slid").easySlider();
  });   
</script>
<style>
  #slid ul, #slid li{margin:0;padding:0;list-style:none}
  #slid li {width:XXXpx;height:YYYpx;overflow:hidden}
</style>

XXX - ширина одного слайда
YYY - высота одного слайда

ну и пример:

Code

<div id="slid">
  <ul>      
   <li><a href="/"><img src="http://raiderchop.ru/images/3/Predators_0.gif" alt="Css Template Preview" /></a></li>
   <li><a href="/"><img src="http://raiderchop.ru/images/3/Snake_Deluxe_2_0.jpg" alt="Css Template Preview" /></a></li>
   <li><a href="/"><img src="http://raiderchop.ru/images/3/Zombie_Clash_0.png" alt="Css Template Preview" /></a></li>
   <li><a href="/"><img src="http://raiderchop.ru/images/3/High_School_-_Hook_Ups_0.gif" alt="Css Template Preview" /></a></li>
   <li><a href="/"><img src="http://raiderchop.ru/images/3/Let_s_Go_Bowling_0.png" alt="Css Template Preview" /></a></li>     
  </ul>
</div>


Новый кавер Jar of Hearts: http://www.youtube.com/watch?v=OLkXQMHVRhI

Сообщение отредактировал Raiderr - Среда, 30.06.2010, 11:51
  
DSC
Дата: Среда, 30.06.2010, 13:34 | Сообщение # 15
спикер
Группа: Проверенные
Пользователь №: 127
Сообщений: 516
Получено оценок: 41
UnderShot, да, бывает и такое))

aka Latro
  
Форум Studio AD » Сайтостроение » Общий форум по Javascript » Слайдер изображений
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.