如何使滑块上的动画更加无缝？

时间：2017-04-06 06:32:03

标签： javascript jquery css

我刚从头开始构建响应式滑块。我注意到它不是一个无缝的。我注意到的方式是左右滑动时会有一些微延迟或断断续续。

$(document).ready(function() {
	
	var carouselContainer = $('.carousel-container'),
	    carousel          = $('.carousel-container .carousel'),
	    carouselItems     = $('.carousel-container .carousel li'),
	    count             = carouselItems.length;

    function responsiveCarousel() {

     	var carouselContainerWidth = carouselContainer.outerWidth();

	    //Add a Condition to display number of slides shown based on Screen/Browser Size

	    if ($(window).width() < 480) {
	        carouselItems.outerWidth( carouselContainerWidth / 1 );
	    }

	    else if ($(window).width() < 560 ) {
	        carouselItems.outerWidth( carouselContainerWidth / 2 );
	    }

	    else {
	        carouselItems.outerWidth( carouselContainerWidth / 5 ); 	
	    }



		// Set Carousel Width by 'X' number of slides
		carousel.outerWidth( count*carouselContainerWidth );


		//Offset Left
		var carouselItemsWidth = carouselItems.outerWidth();
		var leftIndent = parseInt($(carouselItems).css('left')) - carouselItemsWidth;
		carousel.css({'left' : '-' + carouselItemsWidth + 'px' });

		//Prepend Last Item
		carousel.prepend( $('.carousel-container .carousel li:last') );

		$('.btns .next').on('click', function() {
		    nextSlide();
		})


		$('.btns .prev').on('click', function() {
			prevSlide();
		})


		function nextSlide() {
			var move = parseInt($('.carousel-container .carousel').css('left')) - carouselItemsWidth;

			function animate(repeat, speed) {
			    $('.carousel-container .carousel:not(:animated)').animate({ 'left' : move }, speed, function() {

			    	$('.carousel-container .carousel').append( $('.carousel-container .carousel li:first') );
			    	$('.carousel-container .carousel').css({ 'left' : '-' + carouselItemsWidth + 'px' });

			    	if ( repeat > 1 ) {
			    		animate( ( repeat - 1 ), speed );
			    	}
			    });
			}


            // Add a condition to adjust the slider based on the browser size
		    if ($(window).width() < 480) {
			    animate( 1, 100 );
		    }

		    else if ($(window).width() < 560 ) {
		        animate( 2, 100 );
		    }

		    else {
			    animate( 4, 100 );  
		    }

		}



		function prevSlide() {
		    var move = parseInt($('.carousel-container .carousel').css('left')) + carouselItemsWidth;

		    function animate(repeat, speed) {
		    	$('.carousel-container .carousel:not(:animated)').animate({ 'left' : move }, speed, function() {

		    		$('.carousel-container .carousel').prepend( $('.carousel-container .carousel li:last') );
		    		$('.carousel-container .carousel').css({ 'left' : '-' + carouselItemsWidth + 'px' });

		    		if ( repeat > 1 ) {
		    			animate( ( repeat - 1 ), speed  );
		    		}
		    	})
		    }


            // Add a condition to adjust the slider based on the browser size
		    if ($(window).width() < 480) {
			    animate( 1, 100 );
		    }

		    else if ($(window).width() < 560 ) {
		        animate( 2, 100 );
		    }

		    else {
			    animate( 4, 100 );  
		    }
		}
	}


	responsiveCarousel();

	$(window).resize(function() {
		responsiveCarousel();
	});



})
	
.wrapper {
    max-width : 1280px;
    margin    : 0 auto;
    padding   : 20px;
}

.carousel-wrap {
    padding  : 0 50px;
    position : relative;
}


.btns {

    position : absolute;
    width    : 100%;
    z-index  : 10;
    top      : 50%;
    width    : 105%;
    top      : 40px;
    left     : 0;
}

.btns li {
      width       : 35px;
      height      : 40px;
      display     : inline-block;
      cursor      : pointer;
      position    : absolute;
}


.next {
    right : 200px;
}


.carousel-container {
    float            : left;
    position         : relative;
    overflow         : hidden;
    width            : 100%;
    background-color : #fff;
}



.carousel {
    display   : flex;
    flex-wrap : wrap;
    position  : relative; 
}


.carousel li {
    padding             : 0px;
    height              : 110px;
    margin              : 10px 0; 
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
    padding             : 0 0;
    box-sizing          : border-box;
    height           : 110px;
    position         : relative;
    
    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper carousel-wrap">
    

	<div class="carousel-container">
	    <ul class="carousel">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
          <li>11</li>
          <li>12</li>
	    </ul>
	</div>


    <ul class="btns">
        <li class="prev">prev</li>
        <li class="next">next</li>
    </ul>

</div>

2 个答案:

答案 0 :(得分：0)

添加了css转换，不确定这是否是您要找的内容;

＆＃13;
＆＃13; 
$(document).ready(function() {
	
	var carouselContainer = $('.carousel-container'),
	    carousel          = $('.carousel-container .carousel'),
	    carouselItems     = $('.carousel-container .carousel li'),
	    count             = carouselItems.length;

    function responsiveCarousel() {

     	var carouselContainerWidth = carouselContainer.outerWidth();

	    //Add a Condition to display number of slides shown based on Screen/Browser Size

	    if ($(window).width() < 480) {
	        carouselItems.outerWidth( carouselContainerWidth / 1 );
	    }

	    else if ($(window).width() < 560 ) {
	        carouselItems.outerWidth( carouselContainerWidth / 2 );
	    }

	    else {
	        carouselItems.outerWidth( carouselContainerWidth / 5 ); 	
	    }



		// Set Carousel Width by 'X' number of slides
		carousel.outerWidth( count*carouselContainerWidth );


		//Offset Left
		var carouselItemsWidth = carouselItems.outerWidth();
		var leftIndent = parseInt($(carouselItems).css('left')) - carouselItemsWidth;
		carousel.css({'left' : '-' + carouselItemsWidth + 'px' });

		//Prepend Last Item
		carousel.prepend( $('.carousel-container .carousel li:last') );

		$('.btns .next').on('click', function() {
		    nextSlide();
		})


		$('.btns .prev').on('click', function() {
			prevSlide();
		})


		function nextSlide() {
			var move = parseInt($('.carousel-container .carousel').css('left')) - carouselItemsWidth;

			function animate(repeat, speed) {
			    $('.carousel-container .carousel:not(:animated)').animate({ 'left' : move }, speed, function() {

			    	$('.carousel-container .carousel').append( $('.carousel-container .carousel li:first') );
			    	$('.carousel-container .carousel').css({ 'left' : '-' + carouselItemsWidth + 'px' });

			    	if ( repeat > 1 ) {
			    		animate( ( repeat - 1 ), speed );
			    	}
			    });
			}


            // Add a condition to adjust the slider based on the browser size
		    if ($(window).width() < 480) {
			    animate( 1, 100 );
		    }

		    else if ($(window).width() < 560 ) {
		        animate( 2, 100 );
		    }

		    else {
			    animate( 4, 100 );  
		    }

		}



		function prevSlide() {
		    var move = parseInt($('.carousel-container .carousel').css('left')) + carouselItemsWidth;

		    function animate(repeat, speed) {
		    	$('.carousel-container .carousel:not(:animated)').animate({ 'left' : move }, speed, function() {

		    		$('.carousel-container .carousel').prepend( $('.carousel-container .carousel li:last') );
		    		$('.carousel-container .carousel').css({ 'left' : '-' + carouselItemsWidth + 'px' });

		    		if ( repeat > 1 ) {
		    			animate( ( repeat - 1 ), speed  );
		    		}
		    	})
		    }


            // Add a condition to adjust the slider based on the browser size
		    if ($(window).width() < 480) {
			    animate( 1, 100 );
		    }

		    else if ($(window).width() < 560 ) {
		        animate( 2, 100 );
		    }

		    else {
			    animate( 4, 100 );  
		    }
		}
	}


	responsiveCarousel();

	$(window).resize(function() {
		responsiveCarousel();
	});



})
＆＃13; 
.wrapper {
    max-width : 1280px;
    margin    : 0 auto;
    padding   : 20px;
}

.carousel-wrap {
    padding  : 0 50px;
    position : relative;
}


.btns {

    position : absolute;
    width    : 100%;
    z-index  : 10;
    top      : 50%;
    width    : 105%;
    top      : 40px;
    left     : 0;
}

.btns li {
      width       : 35px;
      height      : 40px;
      display     : inline-block;
      cursor      : pointer;
      position    : absolute;
}


.next {
    right : 200px;
}


.carousel-container {
    float            : left;
    position         : relative;
    overflow         : hidden;
    width            : 100%;
    background-color : #fff;
}



.carousel {
    display   : flex;
    flex-wrap : wrap;
    position  : relative; 
    transition: ease-in-out 1s;
}


.carousel li {
    padding             : 0px;
    height              : 110px;
    margin              : 10px 0; 
    background-size     : contain;
    background-repeat   : no-repeat;
    background-position : center;
    padding             : 0 0;
    box-sizing          : border-box;
    height           : 110px;
    position         : relative;
    
    
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper carousel-wrap">
    

	<div class="carousel-container">
	    <ul class="carousel">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
          <li>10</li>
          <li>11</li>
          <li>12</li>
	    </ul>
	</div>


    <ul class="btns">
        <li class="prev">prev</li>
        <li class="next">next</li>
    </ul>

</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

而不是让JS动画，使用css来做。 css中的转换比js中的动画更好

相关问题
最新问题