Maison > Article > interface Web > Comment implémenter l'effet de défilement jQuery
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>
$(function() { var _index = 0; var time = 0; $(".But span").click(function() { _index = $(this).index(); play(_index); }); function play(index) { $(".But span").eq(index).addClass('active').siblings('span').removeClass('active'); $('.scroll').animate({left: -(_index*1024)}, 500); } function autoPlay() { time = setInterval(function() { _index++; if(_index > 6) { $('.scroll').css("left", 0); _index = 0; } play(_index); }, 3000); } autoPlay(); $('.prev').click(function() { if(_index <= 0) { return; } clearInterval(time); play(--_index); autoPlay(); }); $('.next').click(function() { if(_index >= 6) { return; } clearInterval(time); play(++_index); autoPlay(); }); });
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() { $('.ul-list li:last').css({'height':'0px', 'opacity':"0"}).insertBefore(".ul-list li:first").animate({'height':'25px', 'opacity': '1'}, 'slow', function() { $(this).removeAttr('style'); }) }, 3000); </script> </body> </html>
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!