柚子快报邀请码778899分享:HTML多图无缝循环翻页效果
1
2
3
4
5
6
7
8 * {
9 margin: 0;
10 padding: 0;
11 }
12
13 .carousel {
14 width: 1000px;
15 height: 500px;
16 margin: 0 auto;
17 overflow: hidden;
18 }
19
20 .carousel ul li {
21 width: 1000px;
22 height: 500px;
23 list-style-type: none;
24 float: left;
25 }
26
27 .carousel ul li a img {
28 width: 100%;
29 height: 100%;
30 object-fit: contain;
31 }
32
33
34
35
36
55
56
57
58
59
60 var carousel = $('.carousel ul'),
61 li = $('.carousel ul li');
62 carousel.css('width', li.width() * li.length);
63 setInterval(function() {
64 carousel.animate({
65 'marginLeft': -li.width()
66 }, 500, function() {
67 $(this).animate({ 'marginLeft': 0 }, 0)
68 .find('li').eq(0).appendTo($(this));
69 });
70 }, 3000);
71
柚子快报邀请码778899分享:HTML多图无缝循环翻页效果
发表评论