So implementieren Sie den jQuery-Scrolling-Effekt-js-Tutorial-php.cn

So implementieren Sie den jQuery-Scrolling-Effekt

小云云

Freigeben： 2018-01-18 11:45:12

Original

1278 Leute haben es durchsucht

Dieser Artikel stellt vor allem den Scroll-Effekt im Detail vor. Interessierte Freunde können darauf verweisen.

1. Bilderkarussell:

Das Prinzip ist wie folgt:

Angenommen, es gibt sie drei Bilder, Die drei Bilder sind tatsächlich auf der Seite vorhanden, aber da die Größe des eingestellten sichtbaren Teils (hier wird hauptsächlich die Breite berücksichtigt) kleiner oder gleich der Größe eines Bildes ist, möchten Sie die meisten anderen Bilder sehen Die direkte Idee ist Es bedeutet, das anzuzeigende Bild im sichtbaren Bereich zu platzieren, was bedeutet, dass der Versatzwert (links/rechts) des gesamten Bildbereichs geändert werden muss

Spezifische Implementierung:

<!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>

Nach dem Login kopieren

$(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();
 });  
});

Nach dem Login kopieren

2. Scrollen Sie nach oben und unten

Hier ist Text Scrollen als Beispiel: Verwenden Sie einen Timer, um nach dem Zeitintervall kontinuierlich das letzte li-Element in ul in das erste li-Element in ul einzufügen

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

So implementieren Sie $.fn- und Bildlaufeffekte in jquery

JS implementiert benutzerdefinierten Bildlaufeffekt

jQuery implementiert Werbebanner. Teilen von Scrolling-Effekt-Beispielen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie den jQuery-Scrolling-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!