Home > Web Front-end > JS Tutorial > js image carousel manual switching effect_javascript skills

js image carousel manual switching effect_javascript skills

WBOY
Release: 2016-05-16 15:32:55
Original
1539 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>
Copy after login

Source code download: js image carousel manual switching effect

The above is the js image carousel manual switching effect code shared with you. I hope you can like it and apply it in practice.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template