滑块内容与滑块一起移动 [英] Slider content moving along with slider

查看：131 发布时间：2018/6/25 18:57:39 javascript html css slider

本文介绍了滑块内容与滑块一起移动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了一个滑块问题：幻灯片内容应该保持固定到右下角并在此处预制动画，但首先沿着滑块移动，然后回到原来的位置。我想让它在幻灯片进入幻灯片时从右向左滑动，当幻灯片消失时，它会滑回到不可见的位置。

这是我的代码：

 var theSlider = {track ：document.querySelector（'。m-tract-slider-wrapp'），//必须匹配CSS中的`transition-duration`：duration：450，reset：function（）{var slides = document.querySelectorAll（'。m -tract-slider-wrapp> div'）; for（var i = 0; i< slides.length; i ++）{slides [i] .className ='';幻灯片[i] .classList.add（i> 1？'之后'：（i？'current'：'before'））}}，init：function（）{theSlider.reset（）; theSlider.track.classList.remove（'not-loaded'）}，next：function（）{theSlider.track.classList.add（'go-right'）; setTimeout（function（）{var firstSlide = document.querySelector（'。m-tract-slider-wrapp> div：first-child'）; theSlider.track.appendChild（firstSlide）; theSlider.reset（）; theSlider.track .classList.remove（'go-right'）}，theSlider.duration）}，prev：function（）{theSlider.track.classList.add（'go-left'）; setTimeout（function（）{var lastSlide = document.querySelector（'。m-tract-slider-wrapp> div：last-child'）; theSlider.track.insertBefore（lastSlide，theSlider.track.firstChild）; theSlider.reset （）; theSlider.track.classList.remove（'go-left'）}，theSlider.duration）}，prevButton：document.querySelector（'。slide-left'），nextButton：document.querySelector（'。slide-right '）}; window.addEventListener（load，theSlider.init）; theSlider.prevButton.addEventListener（'click'，theSlider.prev）; theSlider.nextButton.addEventListener（'click'，theSlider.next）;

  .m-tract-slider {width：100％;身高：75vh;保证金：5em汽车;位置：相对;溢出：隐藏; background-color：＃f5f5f5} .m-tract-slider-wrapp {height：100％; -webkit-transition：全部350ms立方贝塞尔（.08，.13，0，.81）; -moz-transition：全部350ms立方贝塞尔（.08，.13，0，.81）; -o-transition：全部350ms立方贝塞尔（.08，.13，0，.81）;过渡：所有350毫米立方贝塞尔（.08，.13，0，.81）; opacity：1} .m-tract-slider-wrapp.not-loaded {opacity：0} .m-tract-slider-wrapp> div {height：100％;位置：绝对;背景：透明不重复50％50％/覆盖; m-tract-slider-wrappp> div.before {margin-left：-100％}。m-tract-slider-wrapp> div.current + div {margin-left：100％}。m -tract-slider-wrapp> div.current .m-tract-slide-content {transform：translateX（0）; -ms-transform：translateX（0）; -webkit-transform：translateX（0）; -webkit转换：转换350ms缓解; -moz-transition：转换350ms缓入; -o-transition：350ms缓和;过渡：转换350ms缓入;转换延迟：.6s; margin-left：0} .m-tract-slider-wrapp> div.after〜div {opacity：0} .m-tract-slide-content {position：absolute;底部：0;正确：0;宽度：40％;背景：#fff;填充：3em;保证金：0;身高：50vh; transform：translateX（100％）; -ms-transform：translateX（100％）; -webkit-transform：translateX（100％）; -webkit转换：转换350ms缓解; -moz-transition：转换350ms缓入; -o-transition：350ms缓和;过渡：转换350ms缓入; transition-delay：.6s} .m-tract-slide_title {font-size：32px; font-weight：700;颜色：＃212121} .m-tract-slide_text {font-size：18px;显示：块; margin-top：2em;颜色：#ccc; font-weight：300} .m-tract-slider-control {position：absolute;底部：0;左：0;背景：#fff; padding：1em} .m-tract-slider-btn {display：inline-block;光标：指针; margin-left：1em} .m-tract-slider-btn：first-child {margin-left：0} .go-right div {transform：translateX（-100％）; -ms-transform：translateX（-100％）; -webkit-transform：translateX（-100％）}。go-left div {transform：translateX（100％）; -ms-transform：translateX（100％）; -webkit-transform：translateX（100％）}。go-left div，.go-right div {-webkit-transition：transform 450ms cubic-bezier（.4，0，.2，1）; -moz-transition：变换450ms立方贝塞尔（.4，0，.2，1）; -o-transition：变换450ms立方贝塞尔（.4，0，.2，1）; transition：transform 450ms立方贝塞尔（.4,0,2,1）}

 < div class =m-tract-slider> < div class =m-tract-slider-wrapp> < div style =background-image：url（'https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg'）class =before> < div class =m-tract-slide-content first-slide> < span class =m-tract-slide_title> Gdećešprovestivečnost？< / span> < span class =m-tract-slide_text> Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Voluptatum ea assumenda，nam quia，distinctio omnis。 Aspernatur，molestias nostrum dolores？ Voluptas sequi labore暨ipsum necessitatibus possimus，soluta veritatis aut dicta。 < /跨度> < / DIV> < / DIV> < div style =background-image：url（'https://static.pexels.com/photos/29017/pexels-photo-29017.jpg'）class =current> < div class =m-tract-slide-content first-slide> < span class =m-tract-slide_title>标题2< / span> < span class =m-tract-slide_text> Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Voluptatum ea assumenda，nam quia，distinctio omnis。 Aspernatur，molestias nostrum dolores？ Voluptas sequi labore暨ipsum necessitatibus possimus，soluta veritatis aut dicta。 < /跨度> < / DIV> < / DIV> < div style =background-image：url（'https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg'）class =after> < div class =m-tract-slide-content first-slide> < span class =m-tract-slide_title>标题3< / span> < span class =m-tract-slide_text> Lorem ipsum dolor坐amet，consectetur adipisicing elit。 Voluptatum ea assumenda，nam quia，distinctio omnis。 Aspernatur，molestias nostrum dolores？ Voluptas sequi labore暨ipsum necessitatibus possimus，soluta veritatis aut dicta。 < /跨度> < / DIV> < / DIV> < / DIV> < div class =m-tract-slider-control> < div class =m-tract-slider-btn slide-left>上一个< / div> < div class =m-tract-slider-btn slide-right>下一步< / div> < / div>< / div>

解决方案

当你处理影响动画的属性时，你需要非常小心你的选择器。 $ b

.go-right div 和 .go-left div 选择器正在影响 .go-right 和 .go-left 的每个兄弟，而您可能只想要因此，我用 .go-right>> div 和 .go-left> div替换了它们的直接兄弟姐妹（幻灯片） code>：

查看全文

滑块内容与滑块一起移动 [英] Slider content moving along with slider

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

滑块内容与滑块一起移动 [英] Slider content moving along with slider

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭