Jquery - 在特定时间后自动将滚动条移动到特定位置 [英] Jquery- moving a scrollbar automatically to a specific location after particular time

查看：124
本文介绍了Jquery - 在特定时间后自动将滚动条移动到特定位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

以下是我的 JsFiddle



如何在几秒钟后自动将滚动条向右移动（第三张图片之后），以便用户可以看到下一组图片。



可以有人告诉我如何使用javascript和jquery。



这是我的Html 

 < div class =gallery> 
< div class =row> 
< img class =normalimagesrc => 
<！ - 更多图片 - > 
< / div> 
< div class =row> 
< img class =normalimagesrc => 
<！ - 更多图片 - > 
< / div> 
< / div>

这里是我的css：

  .gallery .row {
 white-space：nowrap; 
} 
 .gallery img {
 display：inline-block; 
 / *其他属性* / 
}


解决方案>

这里是一个简化的jQuery版本： 



  $（document）.ready setInterval（function（）{var A = $（'。gallery'）。scrollLeft（）; if（A< 993）{$（'gallery'）。animate（{scrollLeft：'+ = 331px'}，300 ）;} if（A> = 993）{$（'。gallery'）。delay（400）.animate（{scrollLeft：0}，300）;}}，3000）;}）;  

  .gallery {background-color：#abcdef; width：350px; height：265px; overflow-x：scroll;}。gallery .row {white-space：nowrap;} gallery img {display：inline-block; margin-left：20px; margin-top：20px;}。normalimage {height：80px; width：50px; border：5px solid black;}。wideimage {height：80px; width：130px; border：5px solid black;} img：last-of-type {margin-right：20px; / *上一张图片的边距* /}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =gallery> < div class =row> < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < / div> < div class =row> < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < / div>< / div>



幻灯片之间的简单褪色转换add：

  $ A = $（'。gallery'）。scrollLeft（）; 
 if（A === 0 || A === 331 || A === 662 || A === 993）{
 $（'。gallery img'）。animate（{
 opacity：1 
}，300）; 
} else {
 $（'gallery img'）。 css（{
 opacity：0 
}）; 
} 
}）; 
  

  $（document）.ready（function {setInterval（function（）{var A = $（'。gallery'）。scrollLeft（）; if（A <993）{$（'。gallery'）。animate（{scrollLeft：'+ = 331px' 300）;} if（A> = 993）{$（'。gallery'）。delay（400）.animate（{scrollLeft：0}，300）;}}， .scroll（function（）{var A = $（'。gallery'）。scrollLeft（）; if（A === 0 || A === 331 || A === 662 || A === 993 ）{$（'。gallery img'）。animate（{opacity：1}，300）;} else {$（'。gallery img'）css（{opacity：0}）;}}）;}）;  

  .gallery {background-color：#abcdef; width：350px; height：265px; overflow-x：scroll;}。gallery .row {white-space：nowrap;} gallery img {display：inline-block; margin-left：20px; margin-top：20px;}。normalimage {height：80px; width：50px; border：5px solid black;}。wideimage {height：80px; width：130px; border：5px solid black;} img：last-of-type {margin-right：20px; / *上一张图片的边距* /}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div class =gallery> < div class =row> < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < / div> < div class =row> < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < / div>< / div>



和纯CSS版本： 



  .gallery {background-color：#abcdef; width：350px; height：265px; overflow-x：scroll;}。gallery .row {white-space：nowrap;} gallery img {display：inline-block; margin-left：20px; margin-top：20px;}。normalimage {height：80px; width：50px; border：5px solid black;}。wideimage {height：80px; width：130px; border：5px solid black;} img：last-of-type {margin-right：20px; / *上次图片的边距* /}。gallery img {display：inline-block; margin-left：20px; margin-top：20px;动画：scroll 8s infinite;} @ keyframes scroll {0％{opacity：0; } 6.25％{transform：translatex（0px）;不透明度：1; } 12.5％{transform：translatex（0px）;不透明度：1; } 18.75％{opacity：0; } 25％{opacity：0; } 31.25％{transform：translatex（-331px）;不透明度：1; } 37.5％{transform：translatex（-331px）;不透明度：1; } 43.75％{opacity：0; } 50％{opacity：0; } 56.25％{transform：translatex（-662px）;不透明度：1; } 62.5％{transform：translatex（-662px）;不透明度：1; } 68.75％{opacity：0; } 75％{opacity：0; } 81.25％{transform：translatex（-993px）;不透明度：1; } 87.5％{transform：translatex（-993px）;不透明度：1; } 93.75％{transform：translatex（-1324px）;不透明度：0; } 100％{opacity：0; }}。gallery：hover img {animation：none;} gallery：hover {overflow-x：scroll;}  

 < div class =gallery> < div class =row> < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < / div> < div class =row> < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < img class =normalimagesrc => < img class =normalimagesrc => < img class =wideimagesrc => < / div>< / div>


Here is my JsFiddle

How can i move my scrollbar automatically to the right (after third image) with some fade effect after few specific seconds so that user can see the next set of images.

can someone tell me how it can be done using javascript and jquery.

Here is my Html

<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<!-- more images -->
</div>
<div class="row">
<img class="normalimage" src="">
<!-- more images -->
</div>
</div>

Here is my css:

.gallery .row {
white-space: nowrap;
}
.gallery img {
display: inline-block;
/* other properties */
}

解决方案

Here is a simplified jQuery version:

$(document).ready(function() {
  setInterval(function() {
    var A = $('.gallery').scrollLeft();
    if (A < 993) {
      $('.gallery').animate({
        scrollLeft: '+=331px'
      }, 300);
    }
    if (A >= 993) {
      $('.gallery').delay(400).animate({
        scrollLeft: 0
      }, 300);
    }
  }, 3000);
});

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

To add a simple fade transition between slides add: 

$('.gallery').scroll(function() {
    var A = $('.gallery').scrollLeft();
    if (A === 0 || A === 331 || A === 662 || A === 993) {
      $('.gallery img').animate({
        opacity: 1
      }, 300);
    } else {
      $('.gallery img').css({
        opacity: 0
      });
    }
});


$(document).ready(function() {
  setInterval(function() {
    var A = $('.gallery').scrollLeft();
    if (A < 993) {
      $('.gallery').animate({
        scrollLeft: '+=331px'
      }, 300);
    }
    if (A >= 993) {
      $('.gallery').delay(400).animate({
        scrollLeft: 0
      }, 300);
    }
  }, 3000);
  $('.gallery').scroll(function() {
    var A = $('.gallery').scrollLeft();
    if (A === 0 || A === 331 || A === 662 || A === 993) {
      $('.gallery img').animate({
        opacity: 1
      }, 300);
    } else {
      $('.gallery img').css({
        opacity: 0
      });
    }
  });
});

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

and a pure CSS version:

.gallery {
  background-color: #abcdef;
  width: 350px;
  height: 265px;
  overflow-x: scroll;
}
.gallery .row {
  white-space: nowrap;
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
}
.normalimage {
  height: 80px;
  width: 50px;
  border: 5px solid black;
}
.wideimage {
  height: 80px;
  width: 130px;
  border: 5px solid black;
}
img:last-of-type {
  margin-right: 20px;
  /* margin on last image */
}
.gallery img {
  display: inline-block;
  margin-left: 20px;
  margin-top: 20px;
  animation: scroll 8s infinite;
}
@keyframes scroll {
  0% {
    opacity: 0;
  }
  6.25% {
    transform: translatex(0px);
    opacity: 1;
  }
  12.5% {
    transform: translatex(0px);
    opacity: 1;
  }
  18.75% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  31.25% {
    transform: translatex(-331px);
    opacity: 1;
  }
  37.5% {
    transform: translatex(-331px);
    opacity: 1;
  }
  43.75% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  56.25% {
    transform: translatex(-662px);
    opacity: 1;
  }
  62.5% {
    transform: translatex(-662px);
    opacity: 1;
  }
  68.75% {
    opacity: 0;
  }
  75% {
    opacity: 0;
  }
  81.25% {
    transform: translatex(-993px);
    opacity: 1;
  }
  87.5% {
    transform: translatex(-993px);
    opacity: 1;
  }
  93.75% {
    transform: translatex(-1324px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.gallery:hover img {
  animation: none;
}
.gallery:hover {
  overflow-x: scroll;
}

<div class="gallery">
  <div class="row">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
  </div>
  <div class="row">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
    <img class="normalimage" src="">
    <img class="normalimage" src="">
    <img class="wideimage" src="">
  </div>
</div>

这篇关于Jquery - 在特定时间后自动将滚动条移动到特定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆