Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Canyon
Desert
Erosion
Shape
css
body, html { height: 100%; background: #110101; font-family: 'Roboto', sans-serif; overflow: hidden; } .slideshow { position: absolute; z-index: 1; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; } .slideshow .slider { width: 100vw; height: 100vw; z-index: 2; } .slideshow .slider * { outline: none; } .slideshow .slider .item { height: 100vh; width: 100vw; position: relative; overflow: hidden; border: none; } .slideshow .slider .item .text { display: none; } .slideshow .slider .item img { min-width: 100%; min-height: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .slideshow .slick-dots { position: fixed; z-index: 100; width: 40px; height: auto; bottom: auto; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: auto; color: #fff; display: block; } .slideshow .slick-dots li { display: block; width: 100%; height: auto; } .slideshow .slick-dots li button { position: relative; width: 20px; height: 15px; text-align: center; } .slideshow .slick-dots li button:before { content: ''; background: #fff; color: #fff; height: 2px; width: 20px; border-radius: 0; position: absolute; top: 50%; right: 0; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 0.6; } .slideshow .slick-dots li.slick-active button:before { width: 40px; opacity: 1; } .slideshow.slideshow-right { left: 0; z-index: 1; width: 50vw; pointer-events: none; } .slideshow.slideshow-right .slider { left: 0; position: absolute; } .slideshow-text { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 100; font-size: 80px; width: 100vw; text-align: center; color: #fff; font-family: 'Roboto Condensed', sans-serif; font-weight: 100; pointer-events: none; text-transform: uppercase; letter-spacing: 20px; line-height: 0.8; } @media (max-width: 767px) { .slideshow-text { font-size: 40px; } }
JavaScript
var $slider = $('.slideshow .slider'), maxItems = $('.item', $slider).length; $sliderRight = $('.slideshow').clone().addClass('slideshow-right').appendTo($('.split-slideshow')); rightItems = $('.item', $sliderRight).toArray(); reverseItems = rightItems.reverse(); $('.slider', $sliderRight).html(''); for (i = 0; i < maxItems; i++) { $(reverseItems[i]).appendTo($('.slider', $sliderRight)); } $slider.addClass('slideshow-left'); $('.slideshow-left').slick({ vertical: true, verticalSwiping: true, arrows: false, infinite: true, dots: true, speed: 1000, cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)' }).on('beforeChange', function(event, slick, currentSlide, nextSlide) { if (currentSlide > nextSlide && nextSlide == 0 && currentSlide == maxItems - 1) { $('.slideshow-right .slider').slick('slickGoTo', -1); $('.slideshow-text').slick('slickGoTo', maxItems); } else if (currentSlide < nextSlide && currentSlide == 0 && nextSlide == maxItems - 1) { $('.slideshow-right .slider').slick('slickGoTo', maxItems); $('.slideshow-text').slick('slickGoTo', -1); } else { $('.slideshow-right .slider').slick('slickGoTo', maxItems - 1 - nextSlide); $('.slideshow-text').slick('slickGoTo', nextSlide); } }).on("mousewheel", function(event) { event.preventDefault(); if (event.deltaX > 0 || event.deltaY < 0) { $(this).slick('slickNext'); } else if (event.deltaX < 0 || event.deltaY > 0) { $(this).slick('slickPrev'); }; }); $('.slideshow-right .slider').slick({ swipe: false, vertical: true, arrows: false, infinite: true, speed: 950, cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)', initialSlide: maxItems - 1 }); $('.slideshow-text').slick({ swipe: false, vertical: true, arrows: false, infinite: true, speed: 900, cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)' });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>滚动左右拆分幻灯片-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号