jquery Plug-in_javascript 기술을 기반으로 일반적인 슬라이드 효과 구현

웹사이트에서 슬라이드쇼 효과를 사용하는 것은 매우 흔한 일입니다. 구현 방법에 대해 조사한 결과 복잡할 것이라고 생각했는데 의외로 매우 간단했습니다. 이미 만들어진 jquery 플러그인 jquery.KinSlideshow.js가 있습니다.

jquery.KinSlideshow.js를 사용하면 슬라이드쇼 효과를 쉽게 얻을 수 있습니다

htm 코드:

코드 복사 코드는 다음과 같습니다.

" test.aspx" target="_blank">


< ;img src="images/4.jpg" alt="제목 4" />

js 코드:

코드 복사 코드는 다음과 같습니다.

$(function () {
$("#focusNews").KinSlideshow({
// moveStyle: "down", //전환 방향을 아래쪽으로 설정 [기본 왼쪽 스위치]
intervalTime:8, //간격 시간을 8초로 설정 [기본값 5초]
mouseEvent: " mouseover", //마우스 이벤트를 "마우스 슬라이드 전환"으로 설정 [마우스 클릭 시 기본 전환]
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"} //제목 텍스트 크기를 14px로 설정, color: #FF0000
});

})

이미지 크기를 설정하는 CSS

코드 복사 코드는 다음과 같습니다.

.ifocus{width:400px;height:300px;visibility:hidden;}
.ifocus img{width:700px; height:400px; }

최종 렌더링