suchen

Heim >Web-Frontend >js-Tutorial >So implementieren Sie den jQuery-Scrolling-Effekt

So implementieren Sie den jQuery-Scrolling-Effekt

小云云
小云云Original
2018-01-18 11:45:121279Durchsuche

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>


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

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>

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!

jquery JS ul li
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erklärung zum Einfügen doppelter Daten in ein Array in Vue.jsNächster Artikel：Detaillierte Erklärung zum Einfügen doppelter Daten in ein Array in Vue.js

In Verbindung stehende Artikel

Mehr sehen