>  기사  >  웹 프론트엔드  >  js 이미지 캐러셀 수동 전환 effect_javascript 기술

js 이미지 캐러셀 수동 전환 effect_javascript 기술

WBOY
WBOY원래의
2016-05-16 15:32:551506검색

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 이미지 캐러셀 수동 전환 효과

위 내용은 공유해드린 js 이미지 캐러셀 수동 전환 효과 코드입니다. 마음에 드시고 실전에 적용해보시길 바랍니다.

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