试图编写一个简单的轮播
我正在尝试构建一个简单的旋转木马，我知道那里有很多，但我更愿意尝试解决这个问题。
这是我的旋转木马代码
和css
.amnavigation { height: 140px; overflow: hidden; display: flex; height: 140px; overflow: hidden; display: flex; max-width: 1000px; margin: auto; } .amnavigation ul li { width: 140px; height: 140px; background: #999; display: inline-block; margin: 5px; }
我甚至不确定从哪里开始和使用什么function。
我会将内部ul放在父容器中，然后将该容器向左或向右移动140px（或其他）吗？
这是一个小提琴
https://jsfiddle.net/L1v2uyxd/
任何建议都非常感谢，因为耐心，因为我正在努力学习。
在开始之前，需要考虑以下几点：
-
没有必要告诉浏览器将这些项目设置为无序列表，只是必须覆盖这些显示规则。 使用
isions和
。 甚至是自定义元素（没有默认样式！） -
确定您的旋转木马是否是合适的滑块或只是淡入/淡出物品。 因为推子是相当简单和直接的（你只是动画
opacity），我将假设它是一个滑块 。 -
在较大的屏幕上，您需要决定您的旋转木马是盒装还是全宽。 我个人觉得整个宽度更自然，但有些人更喜欢盒装。 我在这里做得很好。
-
决定是否需要有限或无限滑块。 我会假设它是一个笨蛋 。 如果您不想这样，只需删除附加/添加幻灯片上项目的
js。 -
确定轨道是否具有可变高度。 这很重要，因为您可能希望将其包装在额外的高度占位符中，以便您可以分离动画。 在做一些像滑块一样复杂的事情时，你希望尽可能保持整洁有趣的动画。 他们以后会变得复杂。
现在，鉴于上述情况，请从CSS开始。 我已经逐步完成了它（基本设置，滑块布局，动画）。 js是在动画步骤制作的。 关键不是为你创建一个滑块，而是为了引导你完成整个过程，所以你有一个例子。
/* * go to CSS first, I'll send you back here when when it's time */ $(window).on('load', function(){ var slides = $('slider slide'); slides.each(function(){ // add 'before' and 'after' classes to all and `active` to first $(this).addClass( $(this).index() ? ( $(this).index() > (slides.length / 2) ?'before':'after' ) : 'active' ); }); // place all `.before` slides before `.active` in DOM $(slides.get().reverse()).each(function(){ if ($(this).is('.before')) { $(this).prependTo($(this).parent()); } }); }) function goNext() { active = $('slider .active'); active.next().addClass('active').removeClass('after'); active.addClass('before').removeClass('active'); $('slider slide').first().removeClass('before').appendTo($('slider')).addClass('after') } function goPrev() { active = $('slider .active'); active.prev().addClass('active').removeClass('before'); active.addClass('after').removeClass('active'); $('slider slide').last().removeClass('after').prependTo($('slider')).addClass('before') }
body { margin: 0; text-align: center; overflow-x: hidden; } [flex] { display: flex; flex-direction: column; align-items: center; justify-content: center; } * { box-sizing: border-box; } .content { width: 80vw; border: 1px solid #aaa; text-align: initial; margin: 0 auto; min-height: 100vh; } .header { min-height: 4rem; text-align: center; } .rest-of-page { padding: 1rem; } /* the above is just setup - ignore it * here comes the juice. * I used custom html elements so nothing would be default * this way I needed to put in all required css attributes * not relying on default styles by browser */ slider-container { border: solid red; border-width: 1px 0; display: block; width: 100vw; /* left margin equal with half the difference * between .content width and and viewport width: */ left: calc((100% - 100vw) / 2); position: relative; overflow: hidden; min-height: 300px; text-align: center; } slide[flex] { position: absolute; top: 1rem; width: 80vw; margin: 0 10vw; height: calc(100% - 4rem); background-color: #777; color: white; /* making sure slides don't render before everything loads */ display: none; transition: transform .42s cubic-bezier(.4,0,.2,1); } slider-container .navigation { position: absolute; bottom: 0; display: flex; width: 100%; justify-content: center; } slider-container .navigation > * { width: 2rem; height: 2rem; border: 1px solid #242424; margin: .5rem .25rem; cursor: pointer; } /* all the layout is set so far - all items in place * now we want to handle slider positions and animations * disable the code below to see what we got so far * this is where javascript steps in */ slider .active, slider .before, slider .after { display: flex; } .before { transform: translateX(-100vw); } .after { transform: translateX(100vw); }
Header here icon 1 icon 2 icon 3 icon 4 icon 5 icon 6 icon 7 icon 8 icon 9 icon 10 icon 11 icon 12 icon 13 icon 14 icon 15 Content here