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

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

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

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

Проблема со скриптом перелистывания

Страница: 1
Тема закрыта

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

1

  • Автор: Линн
  • Заслуженный
  • Зарегистрирован: Пн, 10 Ноя 2008
  • Сообщений: 126
  • Уважение: +12
  • Позитив: +45
  • Пол: Женский
  • Последний визит:
    Чт, 15 Янв 2015 22:01:22

Здравствуйте. У меня проблема со скриптом перелистывания (стоит в хтмл-верхе).
Изначально я заказывала дизайн дизайнеру за очень скромную денежку. Она сделала, всё было хорошо, но меня не устраивала таблица. В ней было всего столбца, а мне надо было три. Я переделала таблицу сама. И всё выглядит отлично, пока не начинаешь перелистывать.

Изначально дизайнер взяла вот этот скрипт:

Код:
<style>#slideshow {
margin:0 auto;
width:370px;
height: 100px;
position:relative;
line-height: 10px;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:300px;
  height: 100px;
  overflow:auto; /* allow scrollbar */
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:300px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
  height:100px;
}
/** 
* Slideshow controls style rules.
*/
.control {
  display:block;
  width: 100px;
  height: 163px;
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top: 45px;
  left: 20px;
  background:transparent url(http://10pix.ru/img1/242918/5352879.png) no-repeat 0 0;
}
#rightControl {
  top: 45px;
  right: -70px;
  background:transparent url(http://10pix.ru/img1/1215/5352880.png) no-repeat 0 0;
}
/*Style rules for Demo page */
* {
  margin:0;
  padding:0;
}


.slide h2, .slide p {
  margin:15px;
}
.slide h2 {
  letter-spacing:-1px;
}
.slide img {
  float:right;
  margin:0 15px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 300;
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');
  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
.css({
      'float' : 'right',
      'width' : slideWidth
    });
  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  // Hide left arrow control on first load
  manageControls(currentPosition);
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>

<div style="width: 300px; height:100px; text-align: justify;  border: none; font-family: arial; font-size: 11px; line-height: 2px; margin: 1px;   position: absolute; margin-left: 50px; top: 40px; ">
<div id="pageContainer">
  <!-- Slideshow HTML -->
   <div id="slideshow">
    <div id="slidesContainer">
     
      
     <div class="slide">
        <p>    Третий контейнер    </p>
      </div>
     <div class="slide">
        <p>     Второй контейнер     </p>
      </div>
<div class="slide">
        <p>    Первый контейнер   </p>
      </div>


    </div>
  </div>
  <!-- Slideshow HTML -->
</div></div>

До проблем хтмл-верх выглядел вот так:

Код:
<style>#slideshow {
margin: 410px;
width:900px; 
height: 300px; 
margin-left: -80px; 
position:relative;
line-height: 13px;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:700px; 
  height: 300px;  
  overflow:auto; /* allow scrollbar */  прокрутка, стоит на автомате.
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:700px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ 
  height:300px; 
}
/** 
* Slideshow controls style rules.
*/
.control {
  display:block;
  width: 35px; 
  height: 22px; 
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top: 150px; 
  left: 10px; 
  background:transparent url(http://5.firepic.org/5/images/2014-10/07/69ykir41nu38.png) no-repeat 0 0;
}
#rightControl {
  top: 150px;
  right: 5px;  
  background:transparent url(http://5.firepic.org/5/images/2014-10/07/7p9mpu1g3ylu.png) no-repeat 0 0;
}
/*Style rules for Demo page */
* {
  margin:0;
  padding:0;
}
.slide h2, .slide p {
  margin:15px;
}
.slide h2 {
  letter-spacing:-1px;
}
.slide img {
  float:center; 
  margin:0 0px; 
}
</style>

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 700; 
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');
  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
.css({
      'float' : 'right',
      'width' : slideWidth
    });
  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  // Hide left arrow control on first load
  manageControls(currentPosition);
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>
<div style="width: 700px; height:300px; text-align: center; border: none; font-family: arial; font-size: 12px; line-height: 1px; margin: 1px; position: absolute; margin-left: 50px; top: 80px; color: #7fadcb">
<div id="pageContainer">
  <!-- Slideshow HTML -->
   <div id="slideshow">
    <div id="slidesContainer">
     <div class="slide">
        <p>   
<table layout=fixed width=100%>
<tr>
<tr>

<td>
<center>
баннеры
</center>
</td>
</tr>
</table>
    </p>
      </div>
     
<div class="slide">

        <p>    

<table layout=fixed width=100%>
<tr>
<td>
<center><img src="http://5.firepic.org/5/images/2014-10/06/xbhvq0q5k8ac.png"><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Гостевая</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Сюжет</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Роли</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Внешности</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Шаблон анкеты</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Правила</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">act. «Canon»</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">act. «I will always find you»</a><br>
<img src="http://5.firepic.org/5/images/2014-10/06/c5v0q3ilf4k1.png"><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Квест №1. Яблоко красное как кровь. Мэри-Маргарет Бланшар, Реджина Миллс
</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Квест №2. И дальше до самого утра. Эмма Свон, Мэри-Маргарет Бланшар, Дэвид Нолан, Киллиан Джонс, мистер Голд 
</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Квест №2. История двух сестёр. Эльза, Анна </a><br>
</center>
</td>
<td>

<center>
Пишем сюда свои новости<br>
<img src="http://5.firepic.org/5/images/2014-10/07/jbjfxzi2l3kr.png" title "Нужные"><br><img src="http://5.firepic.org/5/images/2014-10/07/fhu7xr58fpdw.png"><img src="http://5.firepic.org/5/images/2014-10/07/9zxlk85rc2q8.png"><img src="http://5.firepic.org/5/images/2014-10/07/8jxufquwldrs.png"><img src="http://5.firepic.org/5/images/2014-10/07/txhbz80oulzs.png"><img src="http://5.firepic.org/5/images/2014-10/07/0z8dhqw6d574.png"><img src="http://5.firepic.org/5/images/2014-10/07/37inh96ngpk5.png">
<br>
<img src="http://5.firepic.org/5/images/2014-10/06/cob2c1512bli.png"  title "амс">  <img src="http://6.firepic.org/6/images/2014-10/06/nedolwn371l5.png">
<br>
<img src="http://6.firepic.org/6/images/2014-10/06/r789wrsumyvj.png"  title "Активные"> <img src="http://5.firepic.org/5/images/2014-10/07/rct8k7jqdxgn.png"><img src="http://5.firepic.org/5/images/2014-10/07/rct8k7jqdxgn.png"><img src="http://5.firepic.org/5/images/2014-10/07/rct8k7jqdxgn.png"><img src="http://5.firepic.org/5/images/2014-10/07/rct8k7jqdxgn.png"><img src="http://5.firepic.org/5/images/2014-10/07/rct8k7jqdxgn.png"><img src="http://5.firepic.org/5/images/2014-10/07/rct8k7jqdxgn.png">
</center>
</td>
</tr>
</table>
   </p>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->

</div></div>






<!--Анимация -->
<div style="width: auto; height: auto; border: none; top: 9px; margin-left: 66px; position: absolute; "><img src="http://5.firepic.org/5/images/2014-10/06/7f2pvbuzy534.gif" border="0"></div>
<div style="width: auto; height: auto; border: none; top: 141px; margin-left: 754px; position: absolute; "><img src="http://firepic.org/images/2014-10/06/58bz34axbgzy.gif" border="0"></div>

<!--Отключение кнопки Жалоба в сообщениях -->
<script type="text/javascript">
RusffCore.sets.show_reportBtn = 0;
</script>

<!--Отключить функцию "Поделиться" -->
<script type="text/javascript">
RusffCore.sets.share = false;
</script>

<!--Отключить функцию "Это интересно" -->
<script type="text/javascript">
rusffLive.enable = false;
</script>

<!--Отключить надпись "Отредактировано"-->
<style>
p.lastedit {display:none}
</style>

а при появлении проблемы (теперь) хтмл-верх выглядит вот так:

Код:
<style>#slideshow {
margin: 410px;
width:900px; 
height: 300px; 
margin-left: -80px; 
position:relative;
line-height: 13px;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:700px; 
  height: 300px;  
  overflow:auto; /* allow scrollbar */  прокрутка, стоит на автомате.
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:700px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */ 
  height:300px; 
}
/** 
* Slideshow controls style rules.
*/
.control {
  display:block;
  width: 35px; 
  height: 22px; 
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top: 150px; 
  left: 10px; 
  background:transparent url(http://5.firepic.org/5/images/2014-10/07/69ykir41nu38.png) no-repeat 0 0;
}
#rightControl {
  top: 150px;
  right: 5px;  
  background:transparent url(http://5.firepic.org/5/images/2014-10/07/7p9mpu1g3ylu.png) no-repeat 0 0;
}
/*Style rules for Demo page */
* {
  margin:0;
  padding:0;
}
.slide h2, .slide p {
  margin:15px;
}
.slide h2 {
  letter-spacing:-1px;
}
.slide img {
  float:center; 
  margin:0 0px; 
}
</style>

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 700; 
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');
  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
.css({
      'float' : 'right',
      'width' : slideWidth
    });
  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  // Hide left arrow control on first load
  manageControls(currentPosition);
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>

<style>
.image.UP,
.image.Down {
   border:2px solid transparent;
   margin:0;
   padding:0;
}
.image.UP{
opacity:1.0;
   display:block;
   position:absolute;z-index:100;
   transition-duration: 0.96s;
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  -ms-transition-duration: 0.96s; /* IE9+ */
}
.image.UP:hover {
   opacity:0.00;
}
 
div.ImgWrap{
display:inline-block;
padding:0;margin:0;
background-position:center center;
background-repeat:no-repeat;
}
</style>


<div style="width: 700px; height:300px; text-align: center; border: none; font-family: arial; font-size: 12px; line-height: 1px; margin: 1px; position: absolute; margin-left: 5px; top: 80px; color: #7fadcb">
<div id="pageContainer">
  <!-- Slideshow HTML -->
   <div id="slideshow">
    <div id="slidesContainer">
     <div class="slide">
        <p>   
<table layout=fixed width=100%>
<tr>
<tr>

<td>
<center>
баннеры
</center>
</td>
</tr>
</table>
    </p>
      </div>
     
<div class="slide">

        <p>    

<table layout=fixed width=100%>
<tr>
<td width=295  valign=top>

<font face=Georgia>Добро пожаловать в игру!</font><br>
<font face=Georgia>Сегодня я всё узнаю. Сегодня я найду их — Бэя,  мальчишек... хоть кого-то из них. По-прежнему они плачут по ночам или, может, их разобрали по семьям? Венди знала, что в этом новом мире принят гуманизм, но не была уверена в будущем потерянных, и это причиняло</font><br><br>
<center>
<img src="http://5.firepic.org/5/images/2014-10/07/jbjfxzi2l3kr.png" title "Нужные"><br><div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/y9BWY.png"/>
<img class="image Down" src="http://sd.uploads.ru/DraKc.gif"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/GpLjX.png"/>
<img class="image Down" src="http://sd.uploads.ru/SKwfm.gif"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/oVlts.png"/>
<img class="image Down" src="http://sd.uploads.ru/Kf8UA.gif"/>
</div>
<br>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/YgP1o.png"/>
<img class="image Down" src="http://sd.uploads.ru/lnHkK.gif"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/ZmTnP.png"/>
<img class="image Down" src="http://sd.uploads.ru/GUgjh.gif"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/a9Dxh.png"/>
<img class="image Down" src="http://sd.uploads.ru/CIG7E.gif"/>
</div>
</center>

</td>

<td>


<td width=220  valign=top>
<center><img src="http://5.firepic.org/5/images/2014-10/06/xbhvq0q5k8ac.png"><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Гостевая</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Сюжет</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Роли</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Внешности</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Шаблон анкеты</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">Правила</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">act. «Canon»</a><br>
<a href="ССЫЛКА" style="color: #9fe6f5">act. «I will always find you»</a>
<br><br>
<center><img src="http://5.firepic.org/5/images/2014-10/06/c5v0q3ilf4k1.png"><br>
<font face=Georgia>Яблоко красное как кровь. Мэри-Маргарет Бланшар, Реджина Миллс <br>
И дальше до самого утра. Эмма Свон, Мэри-Маргарет Бланшар, Дэвид Нолан, Киллиан Джонс, мистер Голд </font>
</td>
</td>
<td><center>
<img src="http://5.firepic.org/5/images/2014-10/07/jbjfxzi2l3kr.png" title "Нужные"><br><div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/y9BWY.png"/>
<img class="image Down" src="http://sd.uploads.ru/DraKc.gif"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/GpLjX.png"/>
<img class="image Down" src="http://sd.uploads.ru/SKwfm.gif"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/oVlts.png"/>
<img class="image Down" src="http://sd.uploads.ru/Kf8UA.gif"/>
</div>
<br>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/YgP1o.png"/>
<img class="image Down" src="http://sd.uploads.ru/lnHkK.gif"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/ZmTnP.png"/>
<img class="image Down" src="http://sd.uploads.ru/GUgjh.gif"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/a9Dxh.png"/>
<img class="image Down" src="http://sd.uploads.ru/CIG7E.gif"/>
</div>
</center>
<br>
<center>
<img src="http://5.firepic.org/5/images/2014-10/06/cob2c1512bli.png" title "Мастера"><br><div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/y9BWY.png"/>
<img class="image Down" src="http://sd.uploads.ru/DraKc.gif"/>
</div>
<div  class=ImgWrap>
<img class="image UP" src="http://sd.uploads.ru/GpLjX.png"/>
<img class="image Down" src="http://sd.uploads.ru/SKwfm.gif"/>
</div>
</td>
</tr>
</table>
   </p>
      </div>
    </div>
  </div>
  <!-- Slideshow HTML -->

</div></div>






<!--Анимация -->
<div style="width: auto; height: auto; border: none; top: 9px; margin-left: 66px; position: absolute; "><img src="http://5.firepic.org/5/images/2014-10/06/7f2pvbuzy534.gif" border="0"></div>
<div style="width: auto; height: auto; border: none; top: 141px; margin-left: 754px; position: absolute; "><img src="http://firepic.org/images/2014-10/06/58bz34axbgzy.gif" border="0"></div>

<!--Отключение кнопки Жалоба в сообщениях -->
<script type="text/javascript">
RusffCore.sets.show_reportBtn = 0;
</script>

<!--Отключить функцию "Поделиться" -->
<script type="text/javascript">
RusffCore.sets.share = false;
</script>

<!--Отключить функцию "Это интересно" -->
<script type="text/javascript">
rusffLive.enable = false;
</script>

<!--Отключить надпись "Отредактировано"-->
<style>
p.lastedit {display:none}
</style>

Посмотреть старый скрипт можно здесь  http://hogwars1.spybb.ru/, а уже с проблемой здесь http://firstwar.mybb.ru/.

Выглядит это всё вот так:

Было

Стало

http://sd.uploads.ru/t/8IMKy.png

съехала кнопка перелистывания

http://sd.uploads.ru/t/fMXpc.png

http://sd.uploads.ru/t/mKOql.png

а тут съехала и кнопка, и содержимое. При перелистывании идёт мелькание, как на самом последнем скриншоте, а потом устанавливается, как на этом:

http://sd.uploads.ru/t/JHQnq.png

http://sd.uploads.ru/t/whFHq.png

Скажите, пожалуйста, где проблема, что с этим можно сделать, чтобы скрипт перелистывания работал нормально?

Отредактировано Линн (Пн, 13 Окт 2014 23:44:47)

0

2

  • Автор: Deff
  • Тутошний...
  • Deff
  • Зарегистрирован: Ср, 16 Июн 2010
  • Сообщений: 51719
  • Уважение: +15537
  • Позитив: +12338
  • Последний визит:
    Сегодня 12:25:00

Линн
Поставьте более простой и надежный слайдер:  Простой Слайдер картинок и контента
Во вторых ошибки в таблице
незакрытые теги <center> и лишние теги </td>

+1

3

  • Автор: Fover
  • Лови мой ритм
  • Fover
  • Зарегистрирован: Вт, 19 Мар 2013
  • Сообщений: 2332
  • Уважение: +397
  • Позитив: +48
  • Пол: Мужской
  • Последний визит:
    Вт, 13 Сен 2016 16:58:18

Линн
Полностью заменяем html-верх:

Код:
<style type="text/css">
.image.UP, .image.Down {
  border:2px solid transparent;
  margin:0;
  padding:0;
}
.image.UP{
  opacity:1.0;
  display:block;
  position:absolute;z-index:100;
  transition-duration: 0.96s;
  -webkit-transition-duration: 0.96s;
  -moz-transition-duration: 0.96s;
  -o-transition-duration: 0.96s;
  -ms-transition-duration: 0.96s; /* IE9+ */
}
.image.UP:hover {
   opacity:0.00;
}
 
div.ImgWrap {
  display:inline-block;
  padding:0;margin:0;
  background-position:center center;
  background-repeat:no-repeat;
}

#slideshow {
  margin: 410px;
  width:900px; 
  height: 300px; 
  margin-left: -80px; 
  position:relative;
  line-height: 13px;
}
#slideshow #slidesContainer {
  margin:0 auto;
  width:700px; 
  height: 300px;  
  overflow:auto;
  position:relative;
}
#slideshow #slidesContainer .slide {
  margin:0 auto;
  width:700px; 
  height:300px; 
}
.control {
  display:block;
  width: 35px; 
  height: 22px; 
  text-indent:-10000px;
  position:absolute;
  cursor: pointer;
}
#leftControl {
  top: 150px; 
  left: 10px; 
  background:transparent url(http://5.firepic.org/5/images/2014-10/07/69ykir41nu38.png) no-repeat 0 0;
}
#rightControl {
  top: 150px;
  right: 5px;  
  background:transparent url(http://5.firepic.org/5/images/2014-10/07/7p9mpu1g3ylu.png) no-repeat 0 0;
}
* {
  margin:0;
  padding:0;
}
.slide h2, .slide p {
  margin:15px;
}
.slide h2 {
  letter-spacing:-1px;
}
.slide img {
  float:center; 
  margin:0 0px; 
}
</style>

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 700; 
  var slides = $('.slide');
  var numberOfSlides = slides.length;
  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');
  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
.css({
      'float' : 'right',
      'width' : slideWidth
    });
  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);
  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');
  // Hide left arrow control on first load
  manageControls(currentPosition);
  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
   
// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });
  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }
});
</script>
<div style="width: 700px; height:300px; text-align: center; border: none; font-family: arial; font-size: 12px; line-height: 1px; margin: 1px; position: absolute; margin-left: 50px; top: 80px; color: #7fadcb">
  <div id="pageContainer">
    <!-- Slideshow HTML -->
    <div id="slideshow">
      <div id="slidesContainer">
        <div class="slide">
          <p>   
          <table layout=fixed width=100%>
            <tr>
              <td>
                <center>
                  баннеры
                </center>
              </td>
            </tr>
          </table>
          </p>
        </div>
        <div class="slide">
          <p>    
          <table layout="fixed" width="100%">
            <tbody>
              <tr>
                <td width="295" valign="top">
                  <font face="Georgia">Добро пожаловать в игру!</font><br>
                  <font face="Georgia">Сегодня я всё узнаю. Сегодня я найду их — Бэя,  мальчишек... хоть кого-то из них. По-прежнему они плачут по ночам или, может, их разобрали по семьям? Венди знала, что в этом новом мире принят гуманизм, но не была уверена в будущем потерянных, и это причиняло</font><br><br>
                  <center>
                    <img src="http://5.firepic.org/5/images/2014-10/07/jbjfxzi2l3kr.png" title="" "Нужные"=""><br>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/y9BWY.png">
                      <img class="image Down" src="http://sd.uploads.ru/DraKc.gif">
                    </div>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/GpLjX.png">
                      <img class="image Down" src="http://sd.uploads.ru/SKwfm.gif">
                    </div>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/oVlts.png">
                      <img class="image Down" src="http://sd.uploads.ru/Kf8UA.gif">
                    </div>
                    <br>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/YgP1o.png">
                      <img class="image Down" src="http://sd.uploads.ru/lnHkK.gif">
                    </div>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/ZmTnP.png">
                      <img class="image Down" src="http://sd.uploads.ru/GUgjh.gif">
                    </div>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/a9Dxh.png">
                      <img class="image Down" src="http://sd.uploads.ru/CIG7E.gif">
                    </div>
                  </center>
                </td>
                <td width="220" valign="top">
                  <center>
                    <img src="http://5.firepic.org/5/images/2014-10/06/xbhvq0q5k8ac.png"><br>
                    <a href="ССЫЛКА" style="color: #9fe6f5">Гостевая</a><br>
                    <a href="ССЫЛКА" style="color: #9fe6f5">Сюжет</a><br>
                    <a href="ССЫЛКА" style="color: #9fe6f5">Роли</a><br>
                    <a href="ССЫЛКА" style="color: #9fe6f5">Внешности</a><br>
                    <a href="ССЫЛКА" style="color: #9fe6f5">Шаблон анкеты</a><br>
                    <a href="ССЫЛКА" style="color: #9fe6f5">Правила</a><br>
                    <a href="ССЫЛКА" style="color: #9fe6f5">act. «Canon»</a><br>
                    <a href="ССЫЛКА" style="color: #9fe6f5">act. «I will always find you»</a>
                    <br><br>
                    <center><img src="http://5.firepic.org/5/images/2014-10/06/c5v0q3ilf4k1.png"><br>
                      <font face="Georgia">Яблоко красное как кровь. Мэри-Маргарет Бланшар, Реджина Миллс <br>
                      И дальше до самого утра. Эмма Свон, Мэри-Маргарет Бланшар, Дэвид Нолан, Киллиан Джонс, мистер Голд </font>
                    </center>
                  </center>
                </td>
                <td>
                  <center>
                    <img src="http://5.firepic.org/5/images/2014-10/07/jbjfxzi2l3kr.png" title="" "Нужные"=""><br>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/y9BWY.png">
                      <img class="image Down" src="http://sd.uploads.ru/DraKc.gif">
                    </div>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/GpLjX.png">
                      <img class="image Down" src="http://sd.uploads.ru/SKwfm.gif">
                    </div>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/oVlts.png">
                      <img class="image Down" src="http://sd.uploads.ru/Kf8UA.gif">
                    </div>
                    <br>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/YgP1o.png">
                      <img class="image Down" src="http://sd.uploads.ru/lnHkK.gif">
                    </div>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/ZmTnP.png">
                      <img class="image Down" src="http://sd.uploads.ru/GUgjh.gif">
                    </div>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/a9Dxh.png">
                      <img class="image Down" src="http://sd.uploads.ru/CIG7E.gif">
                    </div>
                  </center>
                  <br>
                  <center>
                    <img src="http://5.firepic.org/5/images/2014-10/06/cob2c1512bli.png" title="" "Мастера"=""><br>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/y9BWY.png">
                      <img class="image Down" src="http://sd.uploads.ru/DraKc.gif">
                    </div>
                    <div class="ImgWrap">
                      <img class="image UP" src="http://sd.uploads.ru/GpLjX.png">
                      <img class="image Down" src="http://sd.uploads.ru/SKwfm.gif">
                    </div>
                  </center>
                </td>
              </tr>
            </tbody>
          </table>
          </p>
        </div>
      </div>
    </div>
    <!-- Slideshow HTML -->
  </div>
</div>
<!--Анимация -->
<div style="width: auto; height: auto; border: none; top: 9px; margin-left: 66px; position: absolute; "><img src="http://5.firepic.org/5/images/2014-10/06/7f2pvbuzy534.gif" border="0"></div>
<div style="width: auto; height: auto; border: none; top: 141px; margin-left: 754px; position: absolute; "><img src="http://firepic.org/images/2014-10/06/58bz34axbgzy.gif" border="0"></div>

<!--Отключение кнопки Жалоба в сообщениях -->
<script type="text/javascript">
RusffCore.sets.show_reportBtn = 0;
</script>

<!--Отключить функцию "Поделиться" -->
<script type="text/javascript">
RusffCore.sets.share = false;
</script>

<!--Отключить функцию "Это интересно" -->
<script type="text/javascript">
rusffLive.enable = false;
</script>

<!--Отключить надпись "Отредактировано"-->
<style>
p.lastedit {display:none}
</style>

Отредактировано Fover (Вт, 14 Окт 2014 00:20:53)

+2

4

  • Автор: Линн
  • Заслуженный
  • Зарегистрирован: Пн, 10 Ноя 2008
  • Сообщений: 126
  • Уважение: +12
  • Позитив: +45
  • Пол: Женский
  • Последний визит:
    Чт, 15 Янв 2015 22:01:22

Fover
СРАБОТАЛО!!!
Спасибо огромное, не могу предетаь какое! )))

Deff
И вам тоже огромное спасибо! ))

0

Тема закрыта
Страница: 1

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