Maison >interface Web >js tutoriel >js carrousel d'images commutation manuelle compétences effect_javascript

js carrousel d'images commutation manuelle compétences effect_javascript

WBOY
WBOYoriginal
2016-05-16 15:32:551530parcourir

Utilisez la bibliothèque ScrollPicLeft.js pour basculer les images d'avant en arrière, ce qui convient aux colonnes telles que l'affichage des certificats et les produits recommandés sur les pages Web. Ce n'est pas comme le défilement de sélection traditionnel. Au lieu de cela, vous pouvez cliquer manuellement sur les boutons fléchés de commutation avant et arrière pour tourner les pages des images, de manière à obtenir l'effet de parcourir les images précédentes et suivantes.
Pas besoin d'appeler jquery, initialisation simple, très simple et pratique à utiliser.
Exemple d'effet :

Code js :

<script type="text/javascript">
 var scrollPhoto = new ScrollPicleft();
 scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID""
 scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID
 scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID
 scrollPhoto.frameWidth = 450;//显示框宽度
 scrollPhoto.pageWidth = 150; //翻页宽度
 scrollPhoto.speed = 10; //移动速度(单位毫秒,越小越快)
 scrollPhoto.space = 10; //每次移动像素(单位px,越大越快)
 scrollPhoto.autoPlay = false; //自动播放
 scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒)
 scrollPhoto.initialize(); //初始化 
</script>

L'exemple de cet article décrit l'effet de commutation manuelle du carrousel d'images js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un code d'effet de commutation manuelle basé sur le carrousel d'images js, et le processus de mise en œuvre est très simple.
Le code pour changer manuellement l'effet du carrousel d'images js partagé avec tout le monde est le suivant



js图片轮播手动切换效果





<script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhoto.scrollContId = "ISL_Photo"; // 内容容器ID"" scrollPhoto.arrLeftId = "Left_Photo";//左箭头ID scrollPhoto.arrRightId = "Right_Photo"; //右箭头ID scrollPhoto.frameWidth = 450;//显示框宽度 scrollPhoto.pageWidth = 150; //翻页宽度 scrollPhoto.speed = 10; //移动速度(单位毫秒,越小越快) scrollPhoto.space = 10; //每次移动像素(单位px,越大越快) scrollPhoto.autoPlay = false; //自动播放 scrollPhoto.autoPlayTime = 3; //自动播放间隔时间(秒) scrollPhoto.initialize(); //初始化 </script>

Téléchargement du code source : Effet de commutation manuelle du carrousel d'images js

Ce qui précède est le code d'effet de commutation manuelle du carrousel d'images js partagé avec vous. J'espère que vous pourrez l'aimer et l'appliquer dans la pratique.

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn