js image carousel manual switching effect_javascript skills-JS Tutorial-php.cn

js image carousel manual switching effect_javascript skills

WBOY

Release： 2016-05-16 15:32:55

Original

1531 people have browsed it

Use the ScrollPicLeft.js library to switch pictures back and forth, which 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>

Copy after login

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 code for manually switching the effect of the js image carousel shared with everyone is as follows



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>