>  기사  >  웹 프론트엔드  >  js 이미지 캐러셀 수동 전환 효과 예제 코드

js 이미지 캐러셀 수동 전환 효과 예제 코드

怪我咯
怪我咯원래의
2017-07-04 15:14:152093검색

이 글에서는 주로 js 이미지 캐러셀의 수동 전환 효과를 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

ScrollPicLeft.js 라이브러리를 사용하면 다음 작업에 적합합니다. 웹 페이지 인증서 표시 및 추천 제품 등의 열입니다. 기존의 선택 윤곽 스크롤과는 달리 수동으로 앞으로 및 뒤로 전환 화살표 버튼을 클릭하여 사진 페이지를 넘길 수 있어 이전 사진과 다음 사진을 탐색하는 효과를 얻을 수 있습니다.
jquery를 호출할 필요가 없으며 초기화가 간단하고 사용이 매우 간단하고 편리합니다.
효과 예:

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>

이 문서에서는 js 이미지 캐러셀의 수동 전환 효과에 대해 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
js 이미지 캐러셀 기반의 수동 전환 효과 코드이며 구현 과정이 매우 간단합니다.
모두에게 공유되는 js 이미지 캐러셀 수동 전환 효과 코드는 다음과 같습니다



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>

위 내용은 js 이미지 캐러셀 수동 전환 효과 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.