滑块太快了

时间:2015-07-28 10:45:38

标签: javascript jquery css performance slider

我的网站上有一个滑块,滑块几乎完美无缺。发生的事情是滑块移动得太快一段时间后移动太快后滑动10秒滑块恢复正常

这是我的代码:

<section id="slider" class="container-slider large-12 column">
    <ul class="slider-wrapper">
    <li class="current-slide"><a href="historia.html">
      <img src="img/slide-photo.png" alt="slide 1" title="" alt="" class="">

      <div class="slider-icon">
        <img src="img/cat-photo.png" class="icon-slider" alt="">
      </div>
      <div class="caption">
        <h2 class="slider-title">Cavalo Lusitano</h2>
        <p>O Cavalo Lusitano é procurado como montada de desporto e de lazer e como reprodutor pelas suas raras qualidade de caráter e antiguidade genética, continuando a ser o cavalo por excelência para a Arte Equestre e para o Toureiro.</p>
      </div>
    </a></li>

    <li>
      <img src="img/test2.jpg" title="" alt="">

      <div class="slider-icon">
        <img src="img/cat-photo.png" class="icon-slider" alt="">
      </div>
      <div class="caption">
        <h2 class="slider-title">Cavalo Lusitano</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo iusto placeat aliquid tempore harum, similique!</p>
      </div>
    </li>

    <li>
      <img src="img/test1.jpg" title="" alt="">

      <div class="slider-icon">
        <img src="img/cat-photo.png" class="icon-slider" alt="">
      </div>
      <div class="caption">
        <h2 class="slider-title">Cavalo Lusitano</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos dicta laudantium voluptatem minima! Dolorum tempore dolores excepturi omnis provident. Commodi quis aperiam maiores, dolore a perferendis!</p>
      </div>
    </li>

    </ul>

    <ul id="buttons-slider" class="buttons-slider"></ul>
  </section>

JS:

jQuery(function () {
var currentIndex = 0,
    lightboxLis = jQuery(".light-box li");

var list = [];

jQuery('.thumbnail li').click(function () {

    lightboxLis.eq(currentIndex).show();

    jQuery('.buttons').show();

    jQuery('.container-lightbox').css('height', '100%');

});
 if(lightboxLis.length <= 7){
 for(i=0; i<lightboxLis.length; i++){
  jQuery('<li title="'+i+'"></li>').appendTo('.list');
};
}
else{
for(a=0; a < 5; a++){
jQuery('<li class="esconder"></li>').appendTo('.list');
}
}

var currentLi = jQuery('.list li').attr('title');

if(currentLi == lightboxLis.eq(currentIndex)) {
    jQuery('.list li').addClass('active');
} else {
    jQuery('.list li').removeClass('active');
}

jQuery('.list li').click(function(){
    var current = jQuery(this).attr('title');

    lightboxLis.hide();
    lightboxLis.eq(current).show();
});


jQuery('.next').click(function() {
    currentIndex++;
    if (currentIndex == lightboxLis.length) {
        currentIndex = 0;
    }

    lightboxLis.hide();
    lightboxLis.eq(currentIndex).show();
    console.log(lightboxLis.eq(currentIndex));       
});

jQuery('.prev').click(function() {
    currentIndex--;
    if (currentIndex < 0) {
        currentIndex = lightboxLis.length - 1;
    }

    lightboxLis.hide();
    lightboxLis.eq(currentIndex).show();        
});

 jQuery('.close').click(function() {
  lightboxLis.hide();
  jQuery('.buttons').hide();
  jQuery('.container-lightbox').css('height', '0');
 });
});

CSS:

.container-slider {
 margin: 0px auto 0;
}


.container-slider-historia {
  overflow: hidden;
}

.container-slider-historia img {
  width: 100%;
}


.slider-wrapper {
  z-index: 500;
  position: relative;
  height: 410px;
  background: #transparent;
  overflow: hidden;
}


.slider-wrapper li {
  display: none;
  cursor: pointer;
}

.slider-wrapper .current-slide {
  display: block;
}


.slider-wrapper img {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

.icon-slider {
  z-index: 999;
  float: right;
  position: relative;
}

.slide-historia {
  height: 427px;
  overflow: hidden;
}

.hover-slider {
  background-color: rgba(0, 0, 0, 0.45);
  position: absolute;
  top: 0;
  height: 460px;
  z-index: 999;
  width: 98%;
  text-align: center;
  color: white;
  display: none;
}

.hover-slider h6 {
  color: white;
  font-family: BlissProBold;
  padding: auto 0;
}


.slider-icon {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(253, 253, 253, 0);
  color: #FFF;
  z-index: 999999;
  margin: 10px 25px 0 0;
  min-height: 60px;
  min-width: 60px;
}

.slider-wrapper .caption {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0,0,0,0.65);
  width: 46%;
  padding: 20px;
  color: #FFF;
  min-height: 30%;
  margin-top: 125px;
}


.slider-wrapper h2 {
  color: #FFFFFF;
  font-size: 28px;
  font-weight: 200;
  margin-bottom: 0px;
  text-transform: uppercase;
}

.slider-wrapper p {
  font-size: 16px;
  font-weight: 200;
}


.control-buttons {
  text-align: center;
  position: absolute;
  z-index: 999; 
  width: 95%;
  bottom: 0;
  margin-bottom: 45px;
}

.control-buttons li {
  cursor: pointer;
  display: inline-block;
  background: #d1d3d4;
  text-indent: -99999px;
  height: 12px;
  width: 12px;
  margin: 0 6px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.control-buttons li.active {
  background: #cb301c;
  border: 2px solid white;
}


.buttons-slider {
  text-align: center;
  position: absolute;
  z-index: 999;
  width: 95%;
  bottom: 0;
  margin-bottom: 45px;
}

.buttons-slider li {
  cursor: pointer;
  display: inline-block;
  background: #d1d3d4;
  text-indent: -99999px;
  height: 12px;
  width: 12px;
  margin: 0 6px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

.buttons-slider li.active {
  background: #cb301c;
  border: 2px solid white;
}

.authors {
  text-align: center;
  color: #7a8699;
  display: block;
  font-size: 1.6em;
  font-weight: 300;
  margin-top: 80px;
  font-size: 300;
}

.arrows {
  background-color: transparent;
}

0 个答案:

没有答案