https://kpvoice.com/img_up/shop_pds/powervoice/design/js/slide.js

1
2$(document).ready(function (){
3  var i = 0;
4	var repeat;
5	
6	timer();
7	
8	function timer(){
9		repeat = setInterval(function() {
10			i++;
11			if(i == 4){
12				 i = 0;
13			}
14			$('.imgs li').stop().fadeOut();
15			$('.imgs li').eq(i).stop().fadeIn();
16			
17			$(".pager li").removeClass("on").eq(i).addClass("on");
18			
19		},3000);
20	}
21$(".pager li").click(function(){
22			clearInterval(repeat);
23
24			//.pager li들중 하나를 클릭 했을 때
25			i = $(this).index();
26			//변수 i에 클릭한 li의 인덱스 번호를 저장함.
27			
28				$(".imgs li").stop().fadeOut();
29			//.imgs li들 모두를 사라지게 만듦.
30        $(".imgs li").eq(i).stop().fadeIn(function(){timer();});
31      //사라진 li들 중 eq(i)번째에(인덱스번호) 해당하는 li를 나타나게 만듦.
32            
33        $(".pager li").removeClass("on");
34      //.pager안에 모든 li선택자에게 on클래스를 삭제함.
35        $(this).addClass("on");
36      //클릭한 li에 on클래스를 추가함.
37
38				return false;
39         //a태그를 클릭하는 것과 같은 위치를 클릭하기에 a태그의 원래 기능이 실행되는 현상을 막아줌.
40   });
41});