jquery_jquery를 기반으로 한 이미지 슬라이드 쇼 소스 코드

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

//사진 슬라이드쇼
$(function( ) {
var imgPro = {
imgWidth : 626, //사진 너비
imgConLength : 0, //전체 사진 길이
index : 0, //항법 잠금 인덱스
count : 0, // 사진 개수
left : 0, //절대 위치 왼쪽
pre : -1, //이전 사진 인덱스
curr : 0, //현재 사진 인덱스
next : 1 , //다음 이미지 인덱스
방향: 1, //자동 재생 방향
interTime: 3000//간격 시간
}
addImgAlt(imgPro.curr)
imgPro.count = $ ('# 배너 .list a img').length;
imgPro.imgConLength = imgPro.imgWidth * imgPro.count;
imgPro.left =parseInt($('#box .list ul').css( "왼쪽" ));
//재생 타이머
var t = setInterval(imgPlay, imgPro.interTime)
$('#box .arrowl img, #box .arrowr img,#banner .list a, #box .count li,#box p').hover(function() {
clearInterval(t);
}, function() {
t = setInterval(imgPlay, imgPro.interTime) ;
});
// 자동으로 사진 재생
function imgPlay() {
if ((imgPro.next != imgPro.count && imgPro.direction == 1) || (imgPro. pre = = -1 && imgPro.direction == -1)) {
imgPro.direction = 1
toNext()
} else {
imgPro.direction = -1; >toLast ()
}

}

//왼쪽 방향 클릭
$('#box .arrowl img').click(function() {
if ( imgPro.curr != 0) {
toLast();
}
})
//오른쪽 방향을 클릭하세요
$('#box .arrowr img'). click(function () {
if (imgPro.next != imgPro.count) {
toNext();
}
})//재생하려면 탐색을 클릭하세요
$('# box .count li').click(function() {
imgPro.index = $('#box .count li').index(this);
if (imgPro.curr ! = imgPro.index) {
imgPro.left = (imgPro.curr - imgPro.index) * imgPro.imgWidth;
addImgAlt(imgPro.index)
play(); #box .count li ').eq(imgPro.curr).removeClass('current').end().eq(imgPro.index).addClass('current')
imgPro.curr = imgPro.index ;
imgPro .pre = imgPro.index - 1;
imgPro.next = imgPro.index 1;
}
})
//Play
function play()
$( '#box .list ul').css({
'불투명도' : '0.5'
}).animate({
'left' : imgPro.left "px",
'opacity' : '1'
}, 'slow');
}

//그림 설명 정보 추가
function addImgAlt(index) {
$( "#box p" ).text($("#banner .list a img").eq(index).attr("alt"))
}

//이전
function toLast( ) {
imgPro.left = imgPro.imgWidth;
addImgAlt(imgPro.pre)
play()
$('#box .count li').eq(imgPro) .curr) .removeClass('current').end().eq(imgPro.pre).addClass('current')
imgPro.pre--
imgPro.curr--; imgPro.next --;
}

//Next
function toNext() {
imgPro.left -= imgPro.imgWidth
addImgAlt(imgPro.next); 🎜 >play();
$('#box .count li').eq(imgPro.curr).removeClass('current').end().eq(imgPro.next).addClass('current' )
imgPro.pre ;
imgPro.next
}