슬라이드 – 간단하고 쉽게 사용자 정의하고 스타일을 지정할 수 있는 jQuery 슬라이드쇼 플러그인입니다.
Slides는 페이드 또는 슬라이드 전환 효과, 이미지 페이드 인 및 페이드 아웃, 이미지 사전 압축, 페이지 매김 자동 생성, 반복, 자동 재생 사용자 정의 및 기타 다양한 옵션을 제공합니다.
슬라이드 플러그인을 사용하면 슬라이드를 섞고 슬라이드쇼를 시작할 슬라이드를 설정할 수 있습니다. 풍부한 지침과 예제가 함께 제공됩니다.
더 이상 말도 안 되는 소리는 그만하고 코드만 게시하겠습니다.
$(function(){
$("#slides").slidesjs({
play: {
active: true,
// [boolean] Generate the play and stop buttons.
// You cannot use your own buttons. Sorry.
effect: "slide",
// [string] Can be either "slide" or "fade".
interval: ,
// [number] Time spent on each slide in milliseconds.
auto: false,
// [boolean] Start playing the slideshow on load.
swap: true,
// [boolean] show/hide stop and play buttons
pauseOnHover: false,
// [boolean] pause a playing slideshow on hover
restartDelay:
// [number] restart delay on inactive slideshow
}
});
});프런트 데스크:
<!doctype html>
<head>
<style>
/* Prevents slides from flashing */
#slides {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function(){
$("#slides").slidesjs({
width: ,
height:
});
});
</script>
</head>
<body>
<div id="slides">
<img src="http://placehold.it/x">
<img src="http://placehold.it/x">
<img src="http://placehold.it/x">
<img src="http://placehold.it/x">
<img src="http://placehold.it/x">
</div>
</body>위 내용은 모두 jquery.slides.js에 대한 코드입니다. 마음에 드셨으면 좋겠습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
