Maison  >  Article  >  interface Web  >  js image carrousel effet de commutation manuelle exemple de code

js image carrousel effet de commutation manuelle exemple de code

怪我咯
怪我咯original
2017-07-04 15:14:152082parcourir

Cet article présente principalement en détail l'effet de commutation manuelle du carrousel d'images js, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Utilisez la bibliothèque ScrollPicLeft.js pour réaliser le changement d'image. Le prochain 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 de js carrousel d'images. 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 manuel basé sur le carrousel d'images js, et le processus de mise en œuvre est très simple.
Le code d'effet de commutation manuelle pour le 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>

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!

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