클릭 화살표 이미지 전환_이미지 특수 효과를 구현하는 간단한 js 코드

단계는 다음과 같습니다.

(1) 사진 준비(왼쪽 및 오른쪽 화살표, 일부 샘플 사진)

(2) JS(jquery) 코드는 다음과 같습니다.

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

(3) HTML 부분은 다음과 같습니다.

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

;

아래 첨부된 내용은


의 js 버전입니다.

제목 없는 문서<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> <!-- *{ margin:0; padding:0} #imgslide{ margin:100px auto; width:550px; position:relative;-moz-user-select:none } #imgslide img{ width:550px} #imgslide #pre{ position:absolute; display:block; height:100%; background:#003366;filter:Alpha(Opacity=0);opacity:0; left:0; top:0; z-index:2; width:50%; cursor:url(http://s.xnimg.cn/imgpro/arrow/pre.cur),auto; } #imgslide #next{ position:absolute;z-index:2; display:block; background:#00CC99;filter:Alpha(Opacity=0);opacity:0; height:100%;width:50%; top:0; right:0; cursor:url(http://s.xnimg.cn/imgpro/arrow/next.cur), auto;} #intro{ padding:5px 8px; line-height:1.6; font-size:12px; color:#333; background:#333333; color:#fff} --> </style> <div id="imgslide"> <span id="pre"></span><span id="next"> </span> <img id="showimg" src="http://img1.gtimg.com/0/68/6884/688412_550x550_0.jpg" alt="클릭 화살표 이미지 전환_이미지 특수 효과를 구현하는 간단한 js 코드" > <div id="intro"> </div> </div>