jQuery main slide fade ps lr

 

 

CSS

@charset "utf-8";
/* CSS Document */

*{margin:0; padding:0;}
img{border:0; vertical-align:top;}
ul, li{list-style:none;}

.main{position:relative; width:1000px; height:420px; border:1px solid red; overflow:hidden}
.main .gallery{position:relative; left:0; top:0; width:1000px; height:380px; overflow:hidden;}
.main .gallery li{display:none}

.main .dock{width:330px; position:absolute; left:450px; top:380px;}
.main .dock .mbutton{float:left; display:block; width:15px; height:15px; margin-right:15px; cursor:pointer; background-color:#999; border-radius:15px; transition:all .3s}
.main .dock .ps{ float:left;display:block; width:25px; height:25px; margin-right:15px; margin-top: -5px; cursor:pointer; background:url(../images/stop.png)}
.main .btn{position: absolute; top:150px; display: block; width: 40px; height: 100px; background: red; cursor:pointer;}
.main .btnLeft{left:30px;}
.main .btnRight{right:30px}

 

 

 

JS

// JavaScript Document

$(document).ready(function() {
    var timeonoff;   //타이머 처리
    var imageCount=5;   //이미지개수
    var cnt=1;   //이미지 순서 1 2 3 4 5 1 2 3 4 5....
    var onoff=true; // true=>타이머 동작중 , false=>동작하지 않을때
    
    // 초기 셋팅
    $('.btn1').css('background','red');
    $('.btn1').css('width',40);
    $('.gallery .link1').fadeIn('slow');
    
    // 자동 롤링
    function moveg(){
        if(cnt == imageCount+1){ cnt=1; }
        if(cnt == imageCount){ cnt=0; }  //카운트 초기화
        cnt++;  //카운트 1씩 증가.. 5가되면 다시 초기화 0  1 2 3 4 5 1 2 3 4 5..
        
        $('.gallery li').hide();// 모든 이미지 off
        $('.gallery .link'+cnt).fadeIn('slow'); // 해당 이미지 on
     
        // 버튼 off
        $('.mbutton').css('background','#999');
        $('.mbutton').css('width',15);
        // 해당 버튼 on
        $('.btn'+cnt).css('background','red');//자신만 불켜
        $('.btn'+cnt).css('width',40);
        
        if(cnt == imageCount){ cnt=0 };
    }
    timeonoff= setInterval( moveg , 4000);// 타이머를 동작 1~5이미지를 순서대로 자동 처리
   
    // 버튼 클릭시
    $('.mbutton').click(function(event){  //각각의 버튼 클릭시
        var $target=$(event.target); //클릭한 버튼 $target
        clearInterval(timeonoff); //타이머 중지
        
        $('.gallery li').hide();// 모든 이미지 off
        
        if($target.is('.btn1')){
            cnt=1;
        }else if($target.is('.btn2')){
            cnt=2;
        }else if($target.is('.btn3')){
            cnt=3;
        }else if($target.is('.btn4')){
            cnt=4;
        }else if($target.is('.btn5')){
            cnt=5;
        }
        $('.gallery .link'+cnt).fadeIn('slow');  //자기 자신만 이미지가 보인다
     
        // 버튼 off
        $('.mbutton').css('background','#999');
        $('.mbutton').css('width',15);
        // 해당 버튼 on
        $('.btn'+cnt).css('background','red');//자신만 불켜
        $('.btn'+cnt).css('width',40);

        if(cnt == imageCount){ cnt=0; }  //카운트 초기화
        timeonoff= setInterval( moveg , 4000); //타이머의 부활!!!
        
        if(onoff == false){
            onoff = true;
            $('.ps').css('background','url(images/stop.png)');
        }
    });
    
    
    //stop/play 버튼 클릭시 타이머 동작/중지
    $('.ps').click(function(){
        if(onoff == true){
            clearInterval(timeonoff);   // stop버튼 클릭시
            $(this).css('background','url(images/play.png)');
            onoff = false;
        }else{
            timeonoff = setInterval( moveg , 4000); //play버튼 클릭시
            $(this).css('background','url(images/stop.png)');
            onoff = true;
        }
    });
  
    //왼쪽/오른쪽 버튼 처리
    $('.main .btn').click(function(){
        clearInterval(timeonoff);
      
        // if($(this).is('.btnRight')){ // 오른쪽 버튼 클릭
        //     if(cnt == imageCount){ cnt = 0; }  // 카운트가 마지막 번호(5)라면 초기화 cnt = 0
        //     if(cnt == imageCount+1){ cnt = 1; } // 카운트가 6이면 cnt = 1
        //     cnt++; //카운트 1씩증가
        // }else if($(this).is('.btnLeft')){ // 왼쪽 버튼 클릭
        //     if(cnt == 1){ cnt = imageCount+1; } // cnt = 6
        //     if(cnt == 0){ cnt = imageCount; } // cnt = 5
        //     cnt--; //카운트 감소
        // }

        if($(this).is('.btnRight')){ // 오른쪽 버튼 클릭
            if(cnt == imageCount){ cnt = 0; }  // 카운트가 마지막 번호(5)라면 초기화 cnt = 0
            //if(cnt == imageCount+1){ cnt = 1; } // 카운트가 6이면 cnt = 1
            cnt++; //카운트 1씩증가
        }else if($(this).is('.btnLeft')){ // 왼쪽 버튼 클릭
            if(cnt == 1){ cnt = imageCount+1; } // cnt = 6
            if(cnt == 0){ cnt = imageCount; } // cnt = 5
            cnt--; //카운트 감소
        }
        
        $('.gallery li').hide();// 모든 이미지 off
        $('.gallery .link'+cnt).fadeIn('slow'); // 해당 이미지 on
    
        // 버튼 off
        $('.mbutton').css('background','#999');
        $('.mbutton').css('width',15);
        // 해당 버튼 on
        $('.btn'+cnt).css('background','red');//자신만 불켜
        $('.btn'+cnt).css('width',40);

    
        // if($(this).is('.btnRight')){
        //     if(cnt == imageCount){ cnt = 0; }
        // }else if($(this).is('.btnLeft')){
        //     if(cnt == 1){ cnt = imageCount+1; }
        // }
        timeonoff= setInterval( moveg , 4000);
   
        if(onoff==false){
            onoff=true;
            $('.ps').css('background','url(images/stop.png)');
        }
    });


/*
  $('.main .btnRight').click(function(){
	  clearInterval(timeonoff); 
	  if(cnt==imageCount)cnt=0;  //카운트가 마지막 번호(5)라면 초기화 0
    if(cnt==imageCount+1)cnt=1;  
    
		cnt++; //카운트 1씩증가

	 for(var i=1;i<=imageCount;i++){
          $('.gallery .link'+i).hide(); //모든 이미지를 보이지 않게.
     }
     $('.gallery .link'+cnt).fadeIn('slow'); //자신만 이미지가 보인다..
	 		                    
      for(var i=1;i<=imageCount;i++){
          $('.btn'+i).css('background','url(images/bnt.png)'); //버튼불다꺼!!
      }
      $('.btn'+cnt).css('background','url(images/bnt_on.png)');//자신만 불켜  
	  
      if(cnt==imageCount)cnt=0;
	 	  
	  timeonoff= setInterval( moveg , 4000);
	  
	   if(onoff==false){
		   onoff=true;
		   $('.ps').css('background','url(images/stop.png)');
	     }
	  	    
  }); 	
	
  $('.main .btnLeft').click(function(){
	  clearInterval(timeonoff); 
	  if(cnt==1)cnt=imageCount+1;
	  if(cnt==0)cnt=imageCount;
	  
		cnt--; //카운트 감소
	
	 for(var i=1;i<=imageCount;i++){
          $('.gallery .link'+i).hide(); //모든 이미지를 보이지 않게.
     }
     $('.gallery .link'+cnt).fadeIn('slow'); //자신만 이미지가 보인다..
	 		                    
      for(var i=1;i<=imageCount;i++){
          $('.btn'+i).css('background','url(images/bnt.png)'); //버튼불다꺼!!
      }
      $('.btn'+cnt).css('background','url(images/bnt_on.png)');//자신만 불켜  
	  
      if(cnt==1)cnt=imageCount+1;
	 	  
	  timeonoff= setInterval( moveg , 4000);
	  
	   if(onoff==false){
		   onoff=true;
		   $('.ps').css('background','url(images/stop.png)');
	     }
	  	    
  }); 	
*/	
});

 

 

 

 

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>main_fade-ps-lr</title>
    <link rel="stylesheet" href="css/layout.css">
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/move.js"></script>
</head>
<body>

    <div class="main">
        <div class="gallery">
            <ul>
                <li class="link1"><a href="#"><img src="images/a1.jpg" alt=''></a></li>
                <li class="link2"><a href="#"><img src="images/a2.jpg" alt=''></a></li>
                <li class="link3"><a href="#"><img src="images/a3.jpg" alt=''></a></li>
                <li class="link4"><a href="#"><img src="images/a4.jpg" alt=''></a></li>
                <li class="link5"><a href="#"><img src="images/a5.jpg" alt=''></a></li>
            </ul>
        </div>

        <div class="dock">
            <span class="mbutton btn1"></span>
            <span class="mbutton btn2"></span>
            <span class="mbutton btn3"></span>
            <span class="mbutton btn4"></span>
            <span class="mbutton btn5"></span>
            <span class="ps"></span>
        </div>
        <span class="btn btnLeft">left</span>
        <span class="btn btnRight">right</span>
    </div>
       
</body>
</html>