Maison > interface Web > js tutoriel > le corps du texte

js carrousel d'images commutation manuelle compétences effect_javascript

WBOY
Libérer: 2016-05-16 15:32:55
original
1506 Les gens l'ont consulté

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>
Copier après la connexion

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>
Copier après la connexion

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.

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal