How to realize the Seamless Carousel effect with jQuery

This article mainly explains "how to achieve seamless rotational effect in jQuery". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to achieve seamless rotational effect in jQuery.

Principle: ul scrolls to the left, scrolls once, the first li is inserted into ul, and then let the left value of ul be 0, that is, the initial state, which is too fast for us to see, so there will be a smooth scrolling effect.

/ / CSS

* {margin: 0px; padding: 0px;} li {list-style: none;} .content {width: 1020px; height:112px; overflow: hidden; border:# 4e83c2 solid 1px; margin:50px auto;} .content ul {width: 1020px; height:100px;} .content ul li {float: left; width: 100px; height:100px; border:#ccc solid 1px; display: block; margin: 5px;}

/ / HTML

12 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

/ / JQUERY

Function scroll () {$(".content ul") .animate ({"margin-left": "- 110px"}, function () {$(".content ul li:eq (0)") .appendTo ($(".content ul")) $(".content ul") .css ({"content": 0})} setInterval (scroll,3000) Thank you for your reading. This is the content of "how to achieve seamless carousel in jQuery". After the study of this article, I believe you have a deeper understanding of how to achieve seamless rowing effect in jQuery, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!