html and css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Horizontal slider</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"
></script>
<style>
html,
body,
.slider,
.slide,
.bg{
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.slider{
background: #000;
}
.slide{
background: #000;
position: absolute;
top: 0;
left: 0;
transform: translate3d(0,0,0);
transition: 800ms;
}
.bg{
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: 800ms;
}
.queue{
transform: translate3d(0, 100%, 0);
}
.prev{
transform: translate3d(0,-50%,0);
}
.prev .bg{
opacity: 0.5;
}
.bounce{
transition: 300ms;
}
.slide:first-child.bounce{
transform: translate3d(0,10%,0);
}
.slide:last-child.bounce{
transform: translate3d(0,-10%,0);
}
.slide:nth-child(1) .bg{
background-image: url(gallery/h4.jpg);
}
.slide:nth-child(2) .bg{
background-image: url(gallery/2.jpeg);
}
.slide:nth-child(3) .bg{
background-image: url(gallery/4.jpeg);
}
.slide:nth-child(4) .bg{
background-image: url(gallery/8.jpeg);
}
.slide:nth-child(5) .bg{
background-image: url(gallery/32.jpeg);
}
</style>
</head>
<body>
<div class="slider">
<div class="slide active">
<div class="bg"></div>
</div>
<div class="slide queue">
<div class="bg"></div>
</div>
<div class="slide queue">
<div class="bg"></div>
</div>
<div class="slide queue">
<div class="bg"></div>
</div>
<div class="slide queue">
<div class="bg"></div>
</div>
</div>
<script>
$(document).ready(function() {
var timeStart = 0;
function wheely(e) {
var y = e.originalEvent.deltaY;
var timeStop = new Date().getTime();
var timeDiff = timeStop - timeStart;
if (timeDiff > 200) {
if (y > 0) {
nextSlide();
}
if (y < 0) {
prevSlide();
}
}
timeStart = timeStop;
}
function prevSlide() {
if ($('.active').is(':first-child')) {
if (!$('.slider').hasClass('dragging')) {
$('.slide:first-child').addClass('bounce');
setTimeout(function() {
$('.slide:first-child').removeClass('bounce');
}, 300);
}
} else {
$('.active').removeClass('active').addClass('queue').prev().removeClass('prev').addClass('active');
}
}
function nextSlide() {
if ($('.active').is(':last-child')) {
if (!$('.slider').hasClass('dragging')) {
$('.slide:last-child').addClass('bounce');
setTimeout(function() {
$('.slide:last-child').removeClass('bounce');
}, 300);
}
} else {
$('.active').removeClass('active').addClass('prev').next().removeClass('queue').addClass('active');
}
}
function hotkeys(e) {
if (e.keyCode == 38) {
prevSlide();
}
if (e.keyCode == 40) {
e.preventDefault();
nextSlide();
}
}
function dragStart(e) {
e.preventDefault();
if (e.type == 'touchstart') {
$(document).off('mousedown', dragStart);
startPoint = e.originalEvent.touches[0].pageY;
} else {
startPoint = e.pageY;
}
dragDist = 0;
$(document).on('touchmove mousemove', dragMove);
}
function dragMove(e) {
if (e.type == 'touchmove') {
var movePoint = e.originalEvent.touches[0].pageY;
} else {
var movePoint = e.pageY;
}
dragDist = (movePoint - startPoint) / $('.slider').height() * 100;
$('.slider').addClass('dragging');
$('.slide, .bg').css({
transition: '0ms'
});
if (dragDist < 0) {
$('.active .bg').css({
opacity: 1 + (dragDist / 200)
});
$('.active').css({
transform: 'translate3d(0,' + (dragDist / 2) + '%,0)'
}).next().css({
transform: 'translate3d(0,' + (100 + dragDist) + '%,0)'
});
}
if (dragDist > 0) {
$('.active').css({
transform: 'translate3d(0,' + dragDist + '%,0)'
}).prev().css({
animation: 'none',
transform: 'translate3d(0,' + (-50 + dragDist / 2) + '%,0)'
}).find('.bg').css({
opacity: 0.5 + (dragDist / 200)
});
}
}
function dragEnd() {
$(document).off('touchmove mousemove', dragMove);
$('.slide, .bg').removeAttr('style');
if (dragDist > 20) {
prevSlide();
}
if (dragDist < -20) {
nextSlide();
}
setTimeout(function() {
$('.slider').removeClass('dragging');
}, 800);
}
$(document).on('wheel', wheely);
$(document).on('keydown', hotkeys);
$(document).on('touchstart mousedown', dragStart);
$(document).on('touchend mouseup', dragEnd);
});
</script>
</body>
</html>
在线演示?
获取源码: Neek 1
下载数:111人次, 文件大小: 847.3 KB, 上传日期: 2020年-11 月-26日
公众号回复:gcode 获取解压密码
2,708 人查阅
一键获取本网站前端代码设计的所有源码
获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品
您需要先支付 6元 才能查看此处内容！立即支付