利用HTML5实现全屏可拖拽图片横向切换代码



56 220 74



特效描述:利用HTML5实现 全屏可拖拽 图片横向 切换代码,利用HTML5实现全屏可拖拽图片横向切换代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/base.css" />

2. 引入JS

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/draggabilly.pkgd.min.js"></script>
<script src="js/demo.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script src="js/draggabilly.pkgd.min.js"></script>
<script src="js/demo.js"></script>

3. HTML代码

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="loading">
<main>
	<div class="frame">
		<div class="frame__title-wrap">
			<h1 class="frame__title">可拖动图像条</h1>
			<div class="frame__links">
				<a href="">51前端</a>
			</div>
		</div>
		<h3 class="frame__subtitle">Morandi - 2019</h3>
		<div class="frame__indicator"></div>
	</div>
	<div class="strip-outer">
		<div class="strip-inner">
			<div class="draggable"></div>
			<div class="strip">
				<div class="strip__item">
					<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/1.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>01</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/2.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>02</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/3.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>03</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/4.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>04</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/5.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>05</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/6.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>06</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/7.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>07</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/8.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>08</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/9.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>09</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer"><div class="img-inner" style="background-image:url('img/10.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>10</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/11.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>11</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-xl"><div class="img-inner" style="background-image:url('img/12.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>12</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/13.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>13</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/14.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>14</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/15.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>15</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-l"><div class="img-inner" style="background-image:url('img/16.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>16</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-m"><div class="img-inner" style="background-image:url('img/17.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>17</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer"><div class="img-inner" style="background-image:url('img/18.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>18</span></a><span class="strip__item-plus"></span></span>
				</div>
				<div class="strip__item">
					<div class="img-outer img-outer--size-s"><div class="img-inner" style="background-image:url('img/19.jpg');"></div></div>
					<span class="strip__item-number"><a class="strip__item-link"><span>19</span></a><span class="strip__item-plus"></span></span>
				</div>
			</div><!--/strip-->
		</div><!--/strip-inner-->
		<div class="strip-cover">
			<h2 class="strip-cover__title">Morandi</h2>
			<span class="strip-cover__subtitle">2019</span>
		</div>
	</div><!--/strip-outer-->
	<div class="content">
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/1.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Assemblage</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/2.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Wherewithal</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/3.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Surreptitious</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/4.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Onomatopoeia</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/5.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Nemesis</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/6.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Penumbra</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/7.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Cathedral</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/8.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Propinquity</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/9.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Lissome</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/10.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Moiety</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/11.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Mondegreen</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/12.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Cathedral</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/13.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Gambol</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/14.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Forbearance</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/15.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Evanescent</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/16.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Embrocation</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/17.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Bucolic</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/18.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Eloquence</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<article class="content__item">
			<div class="img-outer img-outer--content">
				<div class="img-inner img-inner--content" style="background-image: url(img/19.jpg);"></div>
			</div>
			<div class="content__item-copy">
				<h2 class="content__item-title">Cathedral</h2>
				<p class="content__item-text">Virtually no important undertaking is now carried on without it, whether that enterprise be building a cathedral, endowing a university, marketing a moving picture, floating a large bond issue, or electing a president.</p>
			</div>
		</article>
		<button class="content__close" aria-label="Close content"><svg width="12" height="26" viewBox="0 0 12 26"><path d="M5.293 25H5v-.293l-5-5L.707 19 5 23.293V0h1v23.657L10.657 19l.707.707-5.657 5.657-.025-.025-.025.025L5.293 25z"></svg></svg></button>
	</div>
</main>
<div class="cursor">
	<div class="cursor__inner cursor__inner--circle">
		<div class="cursor__side cursor__side--left"></div>
		<div class="cursor__side cursor__side--right"></div>
	</div>
</div>
<script>
	// Preload all the images in the page
	imagesLoaded(document.querySelectorAll('.img-inner'), {background: true}, () => document.body.classList.remove('loading'));
</script>
</body>
</html>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册
小小的太阳
关注
TA的相关作品 >>更多
热搜关键词


热门标签: 图片拖动 文字拖动 拖动排序 弹出层拖动 拖动拽动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到