在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

js左右两侧分屏动画轮播图特效

分类:插件代码 更新时间:2018-07-04 浏览次数:850

代码简介

这是一款js左右两侧分屏动画轮播图特效。该轮播图特效中,图片和描述文本分居屏幕的两侧,在鼠标上下滚动时,图片和描述文本做上下相对运动,效果非常炫酷。

浏览器兼容

Chrome Firefox Opera Safari IE10+

使用方法

在页面中引入style.css文件。

<link href="css/style.css" rel="stylesheet">

该轮播图的html结构如下:

<divclass="wrapper">
     <divclass="container">
         <divclass="slideshow">
              <divclass="slideshow-left">
                  <divclass="Lslide">
                      <divclass="Lslide-content">
                          <h2>Probably not</h2>
                          <p>Be a part of our creation</p>
                          <divclass="button">
                              <ahref="#">
                                  <p>More</p>
                                  <iclass="fa fa-chevron-right"aria-hidden="true"></i>
                              </a>
                          </div>
                      </div>
                  </div>
                  <divclass="Lslide">
                      <divclass="Lslide-content">
                          <h2>But not today</h2>
                          <p>Be a part of our creation</p>
 
                          <divclass="button">
                              <ahref="#">
                                  <p>More</p>
                                  <iclass="fa fa-chevron-right"aria-hidden="true"></i>
                              </a>
                          </div>
                      </div>
                  </div>
                  <divclass="Lslide">
                      <divclass="Lslide-content">
                          <h2>Probably not</h2>
                          <p>Be a part of our creation</p>
 
                          <divclass="button">
                              <ahref="#">
                                  <p>More</p>
                                  <iclass="fa fa-chevron-right"aria-hidden="true"></i>
                              </a>
                          </div>
                      </div>
                  </div>   
              </div>
              <divclass="slideshow-right">
                  <divclass="Rslide">
                      <imgsrc="img/flower-3.jpg"alt="">
                  </div>
 
                  <divclass="Rslide">
                      <imgsrc="img/flower-5.jpg"alt="">
                  </div>    
                  <divclass="Rslide">
                      <imgsrc="img/flower-1.jpg"alt="">
                  </div>                                             
              </div>   
              <divclass="control">
                  <divclass="oncontrol control-top">
                      <iclass="fa fa-arrow-up"aria-hidden="true"></i>
                  </div>
                  <divclass="oncontrol control-bottom">
                      <iclass="fa fa-arrow-down"aria-hidden="true"></i>
                  </div>                         
              </div>
         </div>
     </div>
 </div>
然后在页面DOM元素加载完毕之后,通过下面的方法来初始化该轮播图。

varLslide      = document.querySelectorAll('.Lslide'),
    Rslide      = document.querySelectorAll('.Rslide'),
    control     = document.querySelectorAll('.oncontrol'),
    slideHeight = document.querySelector('.wrapper').clientHeight,
    color = ['#fdc97c','#e5d3d0','#71b3d6'],
    index = 0;
 
 
functioninit() {
    slideHeight = document.querySelector('.wrapper').clientHeight;
    for(i = 0; i < Lslide.length; i++) {
        Lslide[i].style.backgroundColor = color[i];
        Lslide[i].style.top = -slideHeight * i +"px";
        Rslide[i].style.top = slideHeight * i +"px";
    } 
}
init()
window.addEventListener('resize',function(){
    init()
});
 
functionmoveToTop() {
 
    index++;
    for(el = 0; el < Lslide.length; el++) {
        Lslide[el].style.top = parseInt(Lslide[el].style.top) + slideHeight +"px";
        Rslide[el].style.top = parseInt(Rslide[el].style.top) - slideHeight +"px";
    }
 
    if(index > Lslide.length-1) {
        index = 0;
        for(el = 0; el < Lslide.length; el++) {
            Lslide[el].style.top = -slideHeight * el +"px";
            Rslide[el].style.top = slideHeight * el +"px";
        }
    }
}
 
functionmoveToBottom() {
    index--;
    for(el = 0; el < Lslide.length; el++) {
        Lslide[el].style.top = parseInt(Lslide[el].style.top) - slideHeight +"px";
        Rslide[el].style.top = parseInt(Rslide[el].style.top) + slideHeight +"px";
         
    }
    if(index < 0) {
        index = Rslide.length-1;
        for(el = 0; el < Lslide.length; el++) {
            Lslide[el].style.top = parseInt(Lslide[el].style.top) + slideHeight * Lslide.length +"px";
            Rslide[el].style.top = parseInt(Rslide[el].style.top) - slideHeight * Rslide.length +"px";
        }
    }
}
 
functiontransition() {
    for(t = 0; t < Lslide.length; t++) {
        Lslide[t].style.transition ="all 0.8s";
        Rslide[t].style.transition ="all 0.8s";
    }
}
   
 
for(t = 0; t < control.length; t++) {
    control[t].addEventListener("click",function() {
 
        if(this.classList.contains('control-top')) {
            moveToTop()
        }
        if(this.classList.contains('control-bottom')) {
            moveToBottom()
        }
 
        transition()
    
    });
}
 
varwheeling;
functionmousemouve(e) {
 
    clearTimeout(wheeling);
    e.preventDefault();
    vare = window.event || e;
    vardelta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
     
    wheeling = setTimeout(function() {
        wheeling = undefined;
        if(delta === 1) {
            moveToTop()
        }
        if(delta === -1) {
            moveToBottom()
        }
    }, 100);
 
    transition()
}
 
document.addEventListener("mousewheel", mousemouve);
document.addEventListener("DOMMouseScroll", mousemouve);

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!