Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Корзина » Настройки слайдера.


Настройки слайдера.

Сообщений 1 страница 12 из 12

1

Это скрипт слайдера, позволяющий по клику на стрелки переходить на следующий/предыдущий слайды.

Скрипт
Код:
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // С помощью скрипта убираем прокрутку в контейнере.
  $('#slidesContainer').css('overflow', 'hidden');
  // Свернем все вкладки .slides в блок #slideInner 
  slides .wrapAll('<div id="slideInner"></div>')
.css({
      'float' : 'left',
      'width' : slideWidth
    });
  // Проставим блоку #slideInner ширину, равную общей ширине контейнеров
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  manageControls(currentPosition);
  $('.control')
    .bind('click', function(){
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    manageControls(currentPosition);
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  function manageControls(position){
    // Скрыть левую стрелку у первого контейнера
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Скрыть правую стрелку у последнего контейнера
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  } 
});
</script>

Это всё остальное, уже настроенное под форум.

CSS и сам слайдер.
Код:
<!-- Cлайдер-->
<style type="text/css">
#slideshow {
margin: 0 auto;
width: 445px;
height: 31px;
margin: 595px auto 0 auto;
margin-left: 30px;
background: transparent;
position: relative;
}
#slideshow #slidesContainer {
  margin: 0 auto;
  width: 365px;
  height: 31px;
  overflow: none; 
  position: relative;
}
#slideshow #slidesContainer .slide {
  margin: 0 auto;
  width: 345px; 
  height: 31px;
}
.control {
  display: block;
  width: 13px;
  height: 31px;
  text-indent: -10000px;
  position: absolute;
  cursor: pointer;
  z-index: 100;
}
#leftControl {
  top: 0;
  left: 0;
  background: transparent url(http://uploads.ru/i/S/4/H/S4Hhb.png) no-repeat 0 0;
}
#rightControl {
  top: 0;
  right: 0;
  background: transparent url(http://uploads.ru/i/i/a/Z/iaZ3E.png) no-repeat 0 0;
}
</style>
Код:
<div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
<a target="_blank" href="http://truevampire.rolka.su"><img src="https://forumstatic.ru/files/0011/7a/6b/45986.gif" width="88" height="31"></a>

<a href="http://kirin.rolbb.ru/" title=" Dream High" target="_blank"><img src="http://uploads.ru/i/3/P/g/3PgHM.gif" border="0" width="88" height="31"></a>

<a href="http://wolfsliveantarctica.rolka.su" target="_blank"><img src="http://savepic.net/2681017.gif" border="0" title="Волчья Жизнь" width=88 height=31></a>

<a href="http://playart.rusff.ru/" target="_blank"><img src="http://uploads.ru/i/5/r/I/5rImY.gif" border="0" alt="PLAY ART"/></a>
      </div>
<div class="slide">
<a href="http://hptertium.f-rpg.ru/" target="_blank"><img src="http://uploads.ru/i/B/H/S/BHSlM.jpg" title="Хогвартс. Другая сторона." width="88" height="31"></a>

<a href="http://reviews.rusff.ru/" target="_blank"><img src="http://uploads.ru/i/9/F/g/9FgQh.gif" title="'Пёс' помощь форумам, обзоры, критика" width="88" height="31"></a>

<a href="http://screamsoul.rusff.ru/"><img src="http://uploads.ru/i/L/j/K/LjKoh.gif" width="88" height="31" border=0 alt="Официальное приглашение на Soul Scream"></a>

 <a href="http://www.rigii008.mybb.ru/"><img src="https://forumupload.ru/uploads/000f/55/8a/87-1.gif"  title="Волшебный мир..." />
      </div>
<div class="slide">
<a href="http://alarmme.ru/" title="Alarm with LA me" target=_blank> <img src="http://uploads.ru/t/r/w/O/rwOYN.gif"></a" border="0" alt="LA me"></a>
      </div>
</div></div>

Эскизы:
http://uploads.ru/i/U/l/p/Ulp9F.png
http://uploads.ru/i/Y/0/i/Y0iU6.jpg
Стрелки:
http://uploads.ru/i/S/4/H/S4Hhb.pnghttp://uploads.ru/i/W/3/m/W3mkw.png
http://uploads.ru/i/i/a/Z/iaZ3E.pnghttp://uploads.ru/i/V/q/Q/VqQI4.png
Что нужно сделать:
1) На первом слайдер нет левой стрелки, т.к. назад на первом слайде листать невозможно. Нужно сделать так, чтобы там находилась полупрозрачная стрелка, на которую нельзя кликнуть.
То же самое с последним слайдом - правой стрелкой.
2) Слайдер статичен сам по себе. Чтобы просмотреть слайды, нужно кликать на стрелки.
Нужно сделать так, чтобы он ещё и сам по себе листался.

0

2

Поднимаю тему.
Слайдер будет необходим уже очень скоро, в течение недели.

0

3

Гы ... нун с утра напоминать - чо к ночи то; дел по горло - завтра опять забуду

Отредактировано Deff (Вс, 17 Июн 2012 23:41:13)

0

4

У меня утро наступает днём. :D
Напоминаю.

0

5

Laktonika
1. Что есть Автопрокрутка ? Ну дошел он до конца ?и чо ?
2. Почему не поставить кольцевой слайдер от мну ?
3. ...

0

6

Deff написал(а):

Что есть Автопрокрутка ? Ну дошел он до конца ?и чо ?

Дошёл - вернулся к первому. :|

0

7

Laktonika

Код:
<script type="text/javascript">
$(document).ready(function(){
  var Tst_Pos_;
  var ThPosition;
  var TimUserClck = false;
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // С помощью скрипта убираем прокрутку в контейнере.
  $('#slidesContainer').css('overflow', 'hidden');
  // Свернем все вкладки .slides в блок #slideInner 
  slides .wrapAll('<div id="slideInner"></div>')
.css({
      'float' : 'left',
      'width' : slideWidth
    });
  // Проставим блоку #slideInner ширину, равную общей ширине контейнеров
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  manageControls(currentPosition);

  //Клик функция
  $('.control').bind('click', function(){clearTimeout(timeoutId);
	TimUserClck = false;clearInterval(intervalID)
	TimUserClck=false;
	slideScroll($(this))
  });

function slideScroll(Q){
    ThPosition = currentPosition;
currentPosition = (Q.attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
Tst_Pos_=(currentPosition < 0 || currentPosition >= slides.length )
    if(Tst_Pos_){currentPosition = ThPosition; return false;}
    manageControls(currentPosition);
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
}

var Left;
function manageControls(position){
    if(position==0){Left=false;$('#leftControl').css({"opacity":"0.4"})
    } else{ $('#leftControl').css({"opacity":"1.0"});}
    if(position==numberOfSlides-1){$('#rightControl').css({"opacity":"0.4"});
    } else{ $('#rightControl').css({"opacity":"1.0"})}
}

 var timeoutId;

 function Clicker_func(){clearTimeout(timeoutId);
	var Cl_R = $('#rightControl')//.click();
 	var Cl_L = $('#leftControl')//.click();
	Rlength=(slides.length-currentPosition-1);//alert(Rlength&&!Left)
var Left_Time=4300;
if(Rlength&&!Left){Cl_R.click();timeoutId = setTimeout(function (){Clicker_func();},Left_Time)}
else{Left=true;Cl_L.click();if(currentPosition!=0){w=330}else{w=Left_Time}; timeoutId = setTimeout( function (){Clicker_func();},w);}

 }

 function Autoscroll(){if(TimUserClck){clearInterval(intervalID)}Clicker_func()}
 var intervalID = setInterval(Autoscroll,2000)

});

</script>

Отредактировано Deff (Ср, 20 Июн 2012 08:38:49)

+1

8

Deff
А покажи, где в скрипте настраивается интервал отображения слайда?

0

9

Laktonika написал(а):

А покажи, где в скрипте настраивается интервал отображения слайда?

var Left_Time=4300;

0

10

Deff
Спасибо. Я так тебя люблююю **

0

11

Laktonika
Гы - На те смайлы - покороче:

Код:
<!-- Смайлы в форму ответа -->
<script type="text/javascript">
var addLink='http://uploads.ru/i/'
var nabor2 = ['5/B/9/5B9Fh.gif',
's/6/q/s6qGA.gif','v/Z/N/vZNeL.gif','p/Q/x/pQxwz.gif',
'd/I/5/dI5Z1.gif','M/9/a/M9aZ6.gif','G/E/0/GE05g.gif',
't/V/6/tV6MN.gif','j/5/x/j5xD9.gif','c/P/b/cPbJE.gif',
'M/c/4/Mc4AW.gif','g/m/G/gmGzN.gif','J/2/V/J2VrR.gif',
'0/j/Z/0jZ1L.gif','D/u/N/DuNcb.gif','D/V/w/DVw5G.gif',
'G/9/a/G9aYw.gif','L/s/h/LshJS.gif','n/Y/J/nYJDI.gif',
'P/G/S/PGSxa.gif','n/g/m/ngm5D.gif','t/V/6/tV6I9.gif',
'u/B/w/uBwDW.gif','4/9/H/49Hbr.gif','F/q/l/FqlaY.gif',
'W/1/L/W1L4n.gif','b/H/0/bH0Me.gif','j/M/l/jMlPe.gif',
'F/4/8/F48JU.gif','u/9/i/u9iaU.gif','L/M/z/LMzou.gif',
'O/7/o/O7opj.gif','k/X/G/kXGTI.gif','F/9/v/F9vsb.gif',
'b/4/k/b4kvJ.gif','O/K/H/OKH37.gif','2/L/k/2Lk4E.gif',
'y/n/Z/ynZm2.gif','H/v/D/HvDTa.gif','x/o/d/xod1X.gif',
'G/R/2/GR2Fc.gif','d/Q/Y/dQYSp.gif','G/u/8/Gu8lj.gif',
'L/X/N/LXNPG.gif','f/v/C/fvCbj.gif','n/p/I/npIsu.gif',
'8/H/K/8HKGZ.gif','0/Y/r/0Yr6V.gif','D/7/h/D7ha5.gif',
'7/q/U/7qUJv.gif','D/n/Y/DnYrx.gif','V/n/d/Vnd9L.gif',
'K/u/j/KujIe.gif','s/z/L/szLIE.gif','4/K/5/4K5tW.gif',
'z/M/f/zMfIc.gif','h/0/l/h0lzt.gif','X/k/S/XkSBh.gif',
'H/n/W/HnWwz.gif','m/b/A/mbAIq.gif','E/r/9/Er9cR.gif',
'y/c/F/ycFkO.gif','y/T/t/yTtFw.gif','P/n/7/Pn7x3.gif',
'0/3/L/03L7d.gif','x/o/K/xoKTg.gif','d/8/f/d8f0O.gif',
'V/D/z/VDzxX.gif','w/z/M/wzMHf.gif','F/V/o/FVozT.gif',
'r/3/G/r3Gwz.gif','K/R/C/KRCFT.gif','6/D/a/6Da27.gif',
'r/9/w/r9weH.gif','9/7/B/97Bjn.gif','B/L/K/BLK7s.gif',
'z/B/d/zBdO4.gif','q/S/a/qSaUP.gif','b/n/j/bnjzt.gif',
'B/w/3/Bw38E.gif','e/R/r/eRrBa.gif','G/F/B/GFByW.gif',
'n/V/d/nVdxX.gif','6/9/G/69GNU.gif','2/B/E/2BEdG.gif',
'S/K/L/SKLl4.gif','F/k/J/FkJXV.gif','h/g/Z/hgZes.gif',
'A/8/4/A84WP.gif','L/l/Q/LlQFE.gif','p/r/I/prIXJ.gif',
'4/D/V/4DVhx.gif','V/X/j/VXjif.gif','Z/f/u/Zfuln.gif',
'z/U/e/zUe1x.gif','D/A/g/DAgiI.gif','Y/U/R/YURiI.gif',
'z/R/i/zRinT.gif','h/4/6/h46EV.gif','c/D/8/cD81l.gif',
'Z/d/0/Zd0hP.gif','8/w/A/8wArX.gif','x/N/w/xNwzY.gif',
'0/N/M/0NM3o.gif','n/2/k/n2kcv.gif','Z/g/z/ZgzUc.gif',
'z/m/P/zmPvp.gif','Y/h/d/YhdRz.gif','V/K/r/VKrFZ.gif',
'2/v/5/2v5Ml.gif','X/4/8/X485I.gif','N/2/H/N2HxW.gif',
's/P/R/sPR8z.png','f/F/I/fFIHj.gif','R/M/d/RMdeK.gif',
'y/f/I/yfIK1.gif','v/h/L/vhLQR.gif','s/z/x/szxlP.gif',
'v/T/d/vTdZy.gif','X/E/3/XE38w.gif','h/p/k/hpk0u.gif',
'w/A/5/wA5dt.gif','4/a/X/4aXFg.gif','I/L/q/ILqaC.gif',
'M/S/8/MS8VJ.gif','G/k/a/Gkaey.gif','Q/D/C/QDCLT.gif',
'D/j/O/DjOql.gif','q/b/l/qblwH.gif','v/3/K/v3KF4.gif',
'Y/Q/B/YQBcL.gif'];

var nabor3 = ['J/t/o/Jto34.gif',
'X/E/e/XEe9r.png','V/8/j/V8jb3.png','h/n/r/hnryx.png',
'd/N/g/dNg8D.png','w/X/U/wXU5G.png','s/Q/U/sQU5m.png',
'e/t/2/et2rP.png','f/Y/V/fYVpt.png','J/F/0/JF0CL.png',
'a/N/4/aN4Be.png','R/l/3/Rl3kW.png','z/1/m/z1mXQ.png',
'l/S/d/lSdYu.png','y/T/Y/yTYcW.png','o/j/V/ojVaP.png',
'T/J/p/TJpQ5.png','F/D/y/FDy4f.png','g/v/N/gvNux.png',
'S/r/f/SrfiP.png','5/z/O/5zORk.png','5/n/D/5nDpP.png',
'J/I/W/JIW1b.png','T/d/r/Tdrhx.png','7/f/y/7fyaX.png',
'X/F/B/XFBNv.png','w/G/P/wGPmE.png','n/y/6/ny6sg.png',
'G/x/2/Gx2gS.png','4/6/h/46hJg.png','m/y/D/myDOJ.gif',
'Z/N/q/ZNqXB.gif','Y/s/U/YsUFD.gif','9/j/p/9jpoJ.gif',
'e/C/J/eCJEb.gif','J/k/c/JkcYb.gif','a/7/f/a7fFP.gif',
'A/l/y/AlyWr.gif','U/g/C/UgCZP.gif','2/K/E/2KEiZ.gif',
'z/I/w/zIwkR.gif','y/T/t/yTtKw.gif','L/R/O/LROtq.gif',
'M/o/F/MoFDr.gif','q/R/O/qROsl.gif','r/x/k/rxkBu.gif',
'o/4/z/o4z2D.gif','F/D/E/FDERI.gif','p/Z/u/pZuXP.gif',
'j/c/0/jc0tS.gif','h/k/E/hkE65.gif','R/F/r/RFrB4.gif',
'o/m/s/omsif.gif','v/0/w/v0whC.gif','N/p/Z/NpZIr.gif',
'r/9/U/r9UXE.gif','K/I/3/KI32G.gif','6/t/A/6tAeD.gif',
'f/D/P/fDP5q.gif','s/2/j/s2jem.gif','c/E/w/cEwaA.gif',
'x/h/o/xholb.gif','r/2/X/r2X1W.gif'];
for(var i in nabor2){nabor2[i]=addLink+nabor2[i]}
for(var i in nabor3){nabor3[i]=addLink+nabor3[i]}
$(document).ready(function() {
$('#smilies-block').addClass('t1');
$('#smilies-area').prepend('<div id="wrapper"><ul class="tabs8 tabs1" onclick="return changeVisibility (\'smilies-area\', false)"><li class="t1 tab-current8"><a>MYBB</a></li><li class="t2"><a>DEVIANTART</a></li><li class="t3"><a>FU</a></li></ul><div class="t2"></div><div class="t3"><br></div></div>');
$.each(nabor2, function(i) {
$('div.t2').append('<img src="'+nabor2[i]+'" onclick=smile(\'[img]'+nabor2[i]+'[/img]\') />');
});
$.each(nabor3, function(i) {
$('div.t3').append('<img src="'+nabor3[i]+'" onclick=smile(\'[img]'+nabor3[i]+'[/img]\') />');
});
$('ul.tabs8.tabs1 li').click(function(){
var thisClass = this.className.slice(0,2);
$('div.t1, div.t2, div.t3').hide();
$('div.' + thisClass).fadeToggle('slow');
$('ul.tabs8.tabs1 li').removeClass('tab-current8');
$(this).addClass('tab-current8');
}); });
$('#smilies-block').css({"display":"block", "overflow-x":"hidden", "overflow-y":"auto", "height":"160px!important"});
$('#smilies-area').css({"overflow-x":"hidden", "overflow-y":"auto", "height":"160px!important"});
</script>

+1

12

Deff
:love:
Спасибо большое.

0


Вы здесь » Единый форум поддержки » Корзина » Настройки слайдера.