js image carousel manual switching effect example code

This article mainly introduces the manual switching effect of js picture carousel in detail, which has certain reference value. Interested friends can refer to it

Use the ScrollPicLeft.js library to realize the picture Switching back and forth is suitable for columns such as certificate display and recommended products on web pages. It is not like traditional marquee scrolling. Instead, you can manually click the forward and backward switching arrow buttons to turn the pages of pictures, so as to achieve the effect of browsing the previous and next pictures.
No need to call jquery, simple initialization, very simple and convenient to use.
Example effect:

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>

The example in this article describes the manual switching effect of js image carousel. Share it with everyone for your reference. The details are as follows:
This is a manual switching effect code based on js image carousel, and the implementation process is very simple.
The js image carousel manual switching effect code shared with everyone is as follows

 
 

 

 

 

 

 

 

 

 

 

 
 

 


<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>

The above is the detailed content of js image carousel manual switching effect example code. For more information, please follow other related articles on the PHP Chinese website!