L'exemple de cet article décrit la méthode du plug-in jquery jquery.nicescroll pour réaliser un glissement vers la gauche et la droite d'images sans barres de défilement. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Nous introduisons ici l'effet spécial consistant à faire glisser des images vers la gauche et la droite avec jQuery sans barres de défilement. L'effet est formé en combinant plusieurs images ensemble. Le plug-in utilise jquery.nicescroll.js. Aucune barre de défilement n'apparaîtra pendant le glissement. processus, qui est plus beau. Si vous avez besoin de cet effet, veuillez consulter le code dans la case ci-dessous.
La capture d'écran de l'effet en cours d'exécution est la suivante :
Le code spécifique est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery.nicescroll无滚动条左右拖拽</title>
<style>
*{ margin:0; padding:0; list-style:none;}
img{ border:none;}
#boxscroll {height: 313px;width: 900px;margin:0 auto;overflow: auto;}
#boxscroll div {width:12570px;}
#boxscroll div img {float:left;}
.row {background:#FFFFCC;}
.row2 {background:#66CCFF;}
</style>
<script src="jquery-1.6.2.min.js"></script>
<script src="http://xiazai.jb51.net/201508/yuanma/jquery.nicescroll.js"></script>
<script>
$(document).ready(function() {
var nicesx = $("#boxscroll").niceScroll("#boxscroll div",{touchbehavior:true,cursorcolor:"#FF00FF",cursoropacitymax:0.6,cursorwidth:24,usetransition:true,hwacceleration:true,autohidemode:"hidden"});
});
</script>
</head>
<body>
<div id="boxscroll">
<div>
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
<img src="http://files.jb51.net/file_images/article/201508/2015810124458663.jpg" width="1257" height="313" onmousedown="return false" />
</div>
</div>
</div>
</body>
</html>J'espère que cet article sera utile à la conception de la programmation jquery de chacun.
Comment modifier le texte dans l'image
Que sont les plug-ins jquery ?
Comment faire fonctionner json avec jquery
Que faire si l'image intégrée ne s'affiche pas complètement
Comment supprimer des éléments dans jquery
Utilisation de la méthode jQuery hover()
jquery implémente la méthode de pagination
Qu'est-ce qu'un élément caché dans jquery
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
