Heim >Web-Frontend >js-Tutorial >js Bildkarussell manuelles Umschalten effect_javascript Fähigkeiten
Verwenden Sie die ScrollPicLeft.js-Bibliothek, um Bilder hin- und herzuschalten, die für Spalten wie die Zertifikatsanzeige und empfohlene Produkte auf Webseiten geeignet ist. Es ist nicht wie beim herkömmlichen Laufschrift-Bildlauf, sondern Sie können manuell auf die Vorwärts- und Rückwärts-Pfeilschaltflächen klicken, um die Bildseiten umzublättern, um so den Effekt zu erzielen, durch das vorherige und das nächste Bild zu blättern.
Kein Aufruf von JQuery erforderlich, einfache Initialisierung, sehr einfach und bequem zu verwenden.
Beispieleffekt:
JS-Code:
<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>
Das Beispiel in diesem Artikel beschreibt den manuellen Umschalteffekt des js-Bildkarussells. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Dies ist ein manueller Umschalteffektcode, der auf dem js-Bildkarussell basiert, und der Implementierungsprozess ist sehr einfach.
Der Code zum manuellen Umschalten des Effekts des für alle freigegebenen js-Bildkarussells lautet wie folgt
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>