Comment implémenter l'effet de défilement jQuery-js tutoriel-php.cn

Comment implémenter l'effet de défilement jQuery

小云云

Libérer： 2018-01-18 11:45:12

original

1246 Les gens l'ont consulté

Cet article présente principalement jQuery pour obtenir un effet de défilement en détail. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Carrousel d'images :

Le principe est le suivant :

Supposons qu'il y en ait trois images, Les trois images existent réellement sur la page, mais comme la taille de la partie visible définie (la largeur est principalement prise en compte ici) est inférieure ou égale à la taille d'une image, si vous souhaitez voir d'autres images, le plus L'idée directe est que cela signifie placer l'image qui doit être affichée dans la zone visible, ce qui signifie que ce qui doit être modifié est la valeur de décalage (gauche/droite) de toute la zone de l'image

Implémentation spécifique :

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="./style.css" rel="external nofollow" >
</head>
<body>
 <p class="carousel">
 <p class="Con">
 <!-- 轮播(carousel)项目 -->
  <p class="scroll">
  <img src="./pic/1.jpg">
  <img src="./pic/2.jpg">
  <img src="./pic/3.jpg">
  <img src="./pic/4.jpg">
  <img src="./pic/5.jpg">
  <img src="./pic/6.jpg">
  <img src="./pic/7.jpg">  
  </p>

  <!-- 轮播(carousel)指标 -->
  <p class="But">
  <span class="active"></span> <!-- 0 * img.width -->
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  </p> 
 </p>

 <!-- 轮播(carousel)导航 -->
 <a href="javascript:void(0)" class="prev" data-slide="prev"> << </a>
 <a href="javascript:void(0)" class="next" data-slide="next"> >> </a>
 </p>
</body>
</html>

Copier après la connexion

$(function() {
 var _index = 0;
 var time = 0;
 $(".But span").click(function() {
 _index = $(this).index();
 play(_index);
 });

 function play(index) {
 $(".But span").eq(index).addClass(&#39;active&#39;).siblings(&#39;span&#39;).removeClass(&#39;active&#39;);
 $(&#39;.scroll&#39;).animate({left: -(_index*1024)}, 500);
 }

 function autoPlay() {
 time = setInterval(function() {
 _index++;
 if(_index > 6) {
 $(&#39;.scroll&#39;).css("left", 0);
 _index = 0;
 }
 play(_index);
 }, 3000);
 }
 autoPlay();
 $(&#39;.prev&#39;).click(function() {
 if(_index <= 0) {
 return;
 }
 clearInterval(time);

 play(--_index);
 autoPlay();
 });
 $(&#39;.next&#39;).click(function() {
 if(_index >= 6) {
 return;
 }
 clearInterval(time);
 play(++_index);
 autoPlay();
 });  
});

Copier après la connexion

2. Faites défiler de haut en bas

Voici le texte défilement à titre d'exemple : utilisez une minuterie pour Après l'intervalle de temps, insérez continuellement le dernier élément li de ul dans le premier élément li de ul

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <script type="text/javascript" src="jquery.min.js"></script>
 <style type="text/css">
 .ul-list li {
 text-decoration: none;
 list-style: none;
 }
 </style>
</head>
<body>
 <ul class="ul-list">
 <li><a href="#">本地数据正反查询的实现例子</a></li>
 <li><a href="#">A-star寻路算法</a></li>
 <li><a href="#">node.js的querystring.stringify的使用</a></li>
 <li><a href="#">利用事件委托写一个简易扫雷游戏</a></li>
 <li><a href="#">懒加载（延迟加载）</a></li>
 <li><a href="#">JS中XML的解析</a></li>
 </ul>
 <script type="text/javascript">
 setInterval(function() {
 $(&#39;.ul-list li:last&#39;).css({&#39;height&#39;:&#39;0px&#39;, &#39;opacity&#39;:"0"}).insertBefore(".ul-list li:first").animate({&#39;height&#39;:&#39;25px&#39;, &#39;opacity&#39;: &#39;1&#39;}, &#39;slow&#39;, function() {
 $(this).removeAttr(&#39;style&#39;);
 })
 }, 3000);
 </script>
</body>
</html>

Copier après la connexion

Recommandations associées :

Comment implémenter $.fn et l'effet de défilement d'image dans jquery

JS implémente l'effet de défilement personnalisé de défilement

jQuery implémente une bannière publicitaire Partage d'exemples d'effets de défilement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!