CSS+jQuery 슬라이드 슬라이드 구현 사례 설명

HTML 부분 코드
Start with having a wrapping container div called main_view , and two sections nested inside called image_reel and paging. The image_reel will contain the sliding images, and paging contains the paging controls. Take a look at the image below for a visual.
 

<div class="main_view">
    <div class="window">
        <div class="image_reel">
            <a href="#"><img src="reel_1.jpg" alt="" /></a>
            <a href="#"><img src="reel_2.jpg" alt="" /></a>
            <a href="#"><img src="reel_3.jpg" alt="" /></a>
            <a href="#"><img src="reel_4.jpg" alt="" /></a>
        </div>
    </div>
    <div class="paging">
        <a href="#" rel="1">1</a>
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
    </div>
</div>

 
 
css+jQuery 슬라이드 슬라이드 구현 실례 강좌
 
CSS 부분 코드
Take a look at the comments below for an explanation of the styles.
 

    /*--Main Container--*/
    .main_view {
    	float: left;
    	position: relative;
    }
    /*--Window/Masking Styles--*/
    .window {
    	height:286px;	width: 790px;
    	overflow: hidden; /*--Hides anything outside of the set width/height--*/
    	position: relative;
    }
    .image_reel {
    	position: absolute;
    	top: 0; left: 0;
    }
    .image_reel img {float: left;}
     
    /*--Paging Styles--*/
    .paging {
    	position: absolute;
    	bottom: 40px; right: -7px;
    	width: 178px; height:47px;
    	z-index: 100; /*--Assures the paging stays on the top layer--*/
    	text-align: center;
    	line-height: 40px;
    	background: url(paging_bg2.png) no-repeat;
    	display: none; /*--Hidden by default, will be later shown with jQuery--*/
    }
    .paging a {
    	padding: 5px;
    	text-decoration: none;
    	color: #fff;
    }
    .paging a.active {
    	font-weight: bold;
    	background: #920000;
    	border: 1px solid #610000;
    	-moz-border-radius: 3px;
    	-khtml-border-radius: 3px;
    	-webkit-border-radius: 3px;
    }
    .paging a:hover {font-weight: bold;} 

 
 
JS 부분 코드
The following script contains comments explaining which jQuery actions are being performed.1.Setting up the Image Slider Start by showing the paging and activating the first link. Then we will calculate and adjust the width of the image_reel according to how many slides there are.
 

    //Show the paging and activate its first link
    $(".paging").show();
    $(".paging a:first").addClass("active");
     
    //Get size of the image, how many images there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;
     
    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth}); 

 
 
2.Setting up the Slider Function and Timer We first create the function for the slide event by itself (rotate ). Then create another function (rotateSwitch ) that will rotate and repeat that slide event (rotate).
 

    //Paging  and Slider Function
    rotate = function(){
        var triggerID = $active.attr("rel") - 1; //Get number of times to slide
        var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
     
        $(".paging a").removeClass('active'); //Remove all active class
        $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
     
        //Slider Animation
        $(".image_reel").animate({
            left: -image_reelPosition
        }, 500 );
     
    }; 
     
    //Rotation  and Timing Event
    rotateSwitch = function(){
        play = setInterval(function(){ //Set timer - this will repeat itself every 7 seconds
            $active = $('.paging a.active').next(); //Move to the next paging
            if ( $active.length === 0) { //If paging reaches the end...
                $active = $('.paging a:first'); //go back to first
            }
            rotate(); //Trigger the paging and slider function
        }, 7000); //Timer speed in milliseconds (7 seconds)
    };
     
    rotateSwitch(); //Run function on launch 

 
 
Take a look at this tutorial for an explanation of how the timer (setInterval ) works.
3.Hover and Click Events In case the user wants to view the slide for a longer period of time, we will allow the slider to stop when it is hovered. Another thing to consider is we should reset the timer each time the paging is clicked. This will prevent unexpected slide switches and allow for a smoother experience.
 

    //On Hover
    $(".image_reel a").hover(function() {
        clearInterval(play); //Stop the rotation
    }, function() {
        rotateSwitch(); //Resume rotation timer
    });	
     
    //On Click
    $(".paging a").click(function() {
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotateSwitch(); // Resume rotation timer
        rotate(); //Trigger rotation immediately
        return false; //Prevent browser jump to link anchor
    }); 

 
 
css+jQuery 슬라이드 슬라이드 구현 실례 강좌
 
데모 보기
 
일부 사이트의 실례
Below are some sites that use similar techniques, check them out for inspiration!
 
 
 
 
 
슬라이드 효과 페이드 인
 
먼저 5개의 img이 포함된 DIV를 만들었고 주요 css 부분 코드는 다음과 같습니다.
 

    #slider1{
    	margin:20px auto;
    	height:240px;
    	width:740px;
    	position:relative;
    	}	 
    #slider1 img{
    	position: absolute; 
    	top: 0px; 
    	left: 0px;
    	display:none;
    } 

 
원리 분석: 일정 시간 간격을 두고 다음 그림의 z-index를 바꾸어 담입 담출 슬라이드 효과를 실현한다. 구체적인 js 부분 코드는 다음과 같다.
 

 var now=0;
      setInterval(function (){
          pre=now===0?2:now-1;
          nxt=now===4?0:now+1;
          var div=$("#slider1").children();
          div.eq(now).fadeOut(0,function(){   
		      div.css('z-index',1);       
              div.eq(nxt).css("z-index",6).fadeIn(600);
              div.eq(pre).css("z-index",4);
              div.eq(now).css("z-index",5);
              now=nxt;
          });
      },3000);

 
 
슬라이드 효과 스크롤
두 개의 DIV를 만들었는데 ID는 각각 슬라이더2와children이고 슬라이더2는 부div이며 children은 부DIV이며 5개의img를 포함하고 부DIV(slider2)는overflow:hidden으로 설정되었다.주요 CSS 섹션은 다음과 같습니다.
 
 

 #slider2{
	overflow:hidden;
        margin:20px auto;
	height:240px;
	width:740px;
	position:relative;
	}
#children img{
      	width:740px;
	height:240px;
	margin:0;
	padding:0;
	float:left;
      }
#children{
	height:240px;
        position:relative;
        width:740px;
	}

 
원리 분석: 일정한 시간 간격을 두고 그림의 절대 위치를 바꾸고 시간은 애니메이션의 슬라이드 코드를 굴린다. 구체적인 js 부분 코드는 다음과 같다.
 
 

    var slider=1;
    setInterval(function(){
    		slider=slider===5?0:slider;		
    		var t=-slider*240;
    		slider++;
    		$("#children").animate({top:t},600);
    },3000); 

 
프로그램 데모 주소: http://www.js8.in/mywork/jquery_slider/