html css js_javascript 기술을 사용하여 구현된 간단한 그림 전환 효과

$(function() {
var sWidth = $("#focus").width(); //초점 이미지(표시 영역)의 너비를 구합니다.
var len = $ (" #focus ul li").length; //초점 이미지 개수 가져오기
var index = 0;
var picTimer;

//다음 코드는 숫자 버튼과 버튼 뒤에는 반투명 막대가 있으며 이전 페이지와 다음 페이지에 대한 두 개의 버튼이 있습니다.
var btn = "";
$("#focus").append(btn) ;
$("#focus .btnBg").css("opacity",0.5)

//해당 콘텐츠를 표시하기 위한 작은 버튼에 대한 마우스 슬라이드인 이벤트 추가
$("#focus . btn 스팬").css("불투명도",0.4).mouseenter(function() {
index = $("#focus .btn 스팬").index(this);
showPics(index);
}).eq(0).trigger("mouseenter");

//이전 페이지 및 다음 페이지 버튼 투명도 처리
$("#focus .preNext" ).css( "불투명도",0.2).hover(function() {
$(this).stop(true,false).animate({"opacity":"0.5"},300);
},function( ) {
$(this).stop(true,false).animate({"opacity":"0.2"},300)
}); 이전 페이지 버튼
$("#focus .pre").click(function() {
index -= 1;
if(index == -1) {index = len - 1;}
showPics (index);
});

//다음 페이지 버튼
$("#focus .next").click(function() {
index = 1;
if(index == len) {index = 0;}
showPics(index);
})

//이 예는 좌우로 스크롤됩니다. li 요소는 같은 페이지에 있습니다. 행은 왼쪽에 있으므로 여기서 주변 ul 요소의 너비를 계산해야 합니다.
$("#focus ul").css("width",sWidth * (len) );

//마우스 슬라이드 초점 사진이 켜져 있으면 자동 재생을 중지하고 슬라이드 아웃하면 자동 재생을 시작합니다.
$("#focus").hover(function() {
clearInterval(picTimer);
},function() {
picTimer = setInterval(function() {
showPics(index);
index ;
if(index == len) {index = 0;}
},4000); //this 4000 자동 재생 간격을 나타냅니다. 단위는 밀리초입니다.
}).trigger("mouseleave")//화면 표시 기능 , 수신된 인덱스 값에 따라 해당 콘텐츠 표시
function showPics(index ) { //일반 전환
var nowLeft = -index*sWidth; //인덱스 값을 기준으로 ul 요소의 왼쪽 값을 계산합니다.
$("#focus ul").stop(true,false).animate({ "left":nowLeft},300); //animate()를 통해 계산된 위치로 스크롤하도록 ul 요소를 조정합니다.
//$("#focus .btnspan").removeClass("on").eq( index).addClass("on") //현재 버튼에 대해 선택한 효과로 전환
$(" #focus .btn 범위").stop(true,false).animate({"불투명도":" 0.4"},300).eq(index).stop(true,false).animate({"불투명도":" 1"},300); //현재 버튼에 대해 선택한 효과로 전환
}
});


왼쪽 및 오른쪽 전환 이미지 사용