HTML5全屏图文左右滑动切换滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5全屏图文左右滑动切换滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5全屏图文左右滑动切换特效</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/modernizr.js"></script>
</head>
<body>
<main>
	<div class="cd-image-block">
		<ul class="cd-images-list">
			<li class="is-selected">
				<a href="#0">
					<h2>标题</h2>
				</a>
			</li>

			<li>
				<a href="#0">
					<h2>标题2</h2>
				</a>
			</li>

			<li>
				<a href="#0">
					<h2>标题3</h2>
				</a>
			</li>

			<li>
				<a href="#0">
					<h2>标题4</h2>
				</a>
			</li>
		</ul>
	</div>

	<div class="cd-content-block">
		<ul>
			<li class="is-selected">
				<div>
					<h2>标题</h2>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
				</div> 
			</li>

			<li>
				<div>
					<h2>标题</h2>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
				</div> 
			</li>

			<li>
				<div>
					<h2>标题</h2>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
				</div> 
			</li>

			<li>
				<div>
					<h2>标题</h2>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
					
					<p>
						标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
					</p>
				</div> 
			</li>
		</ul>

		<button class="cd-close">关闭</button>
	</div>

	<ul class="block-navigation">
		<li><button class="cd-prev inactive">上一页</button></li>
		<li><button class="cd-next">下一页</button></li>
	</ul>
</main>

<script src="js/jquery-2.1.4.js"></script>
<script src="js/main.js"></script>
<script src="adv-banners/ads.js"></script>

</body>
</html>

JS代码(main.js):

jQuery(document).ready(function($){
	//store DOM elementsvar imageWrapper = $('.cd-images-list'),imagesList = imageWrapper.children('li'),contentWrapper = $('.cd-content-block'),contentList = contentWrapper.children('ul').eq(0).children('li'),blockNavigation = $('.block-navigation'),blockNavigationNext = blockNavigation.find('.cd-next'),blockNavigationPrev = blockNavigation.find('.cd-prev'),//used to check if the animation is runninganimating = false;
	//on mobile - open a single project content when selecting a project imageimageWrapper.on('click','a',function(event){
	event.preventDefault();
	var device = MQ();
	(device == 'mobile') && updateblock(imagesList.index($(this).parent('li')),'mobile');
}
);
	//on mobile - close visible project when clicking the .cd-close btncontentWrapper.on('click','.cd-close',function(){
	var closeBtn = $(this);
	if( !animating ){
	animating = true;
	closeBtn.removeClass('is-scaled-up').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
	contentWrapper.removeClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
	animating = false;
}
);
	$('.cd-image-block').removeClass('content-block-is-visible');
	closeBtn.off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
}
);
}
}
);
	//on desktop - update visible project when clicking the .block-navigationblockNavigation.on('click','button',function(){
	var direction = $(this),indexVisibleblock = imagesList.index(imageWrapper.children('li.is-selected'));
	if( !direction.hasClass('inactive') ){
	var index = ( direction.hasClass('cd-next') ) ? (indexVisibleblock + 1):(indexVisibleblock - 1);
	updateblock(index);
}
}
);
	//on desktop - update visible project on keydown$(document).on('keydown',function(event){
	var device = MQ();
	if( event.which=='39' && !blockNavigationNext.hasClass('inactive') && device == 'desktop'){
	//go to next projectupdateblock(imagesList.index(imageWrapper.children('li.is-selected')) + 1);
}
else if( event.which=='37' && !blockNavigationPrev.hasClass('inactive') && device == 'desktop' ){
	//go to previous projectupdateblock(imagesList.index(imageWrapper.children('li.is-selected')) - 1);
}
}
);
	function updateblock(n,device){
	if( !animating){
	animating = true;
	var imageItem = imagesList.eq(n),contentItem = contentList.eq(n);
	classUpdate($([imageItem,contentItem]));
	if( device == 'mobile'){
	contentItem.scrollTop(0);
	$('.cd-image-block').addClass('content-block-is-visible');
	contentWrapper.addClass('is-visible').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
	contentWrapper.find('.cd-close').addClass('is-scaled-up');
	animating = false;
}
);
}
else{
	contentList.addClass('overflow-hidden');
	contentItem.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
	contentItem.siblings().scrollTop(0);
	contentList.removeClass('overflow-hidden');
	animating = false;
}
);
}
//if browser doesn't support transitionif( $('.no-csstransitions').length > 0 ) animating = false;
	updateblockNavigation(n);
}
}
function classUpdate(items){
	items.each(function(){
	var item = $(this);
	item.addClass('is-selected').removeClass('move-left').siblings().removeClass('is-selected').end().prevAll().addClass('move-left').end().nextAll().removeClass('move-left');
}
);
}
function updateblockNavigation(n){
	( n == 0 ) ? blockNavigationPrev.addClass('inactive'):blockNavigationPrev.removeClass('inactive');
	( n + 1 >= imagesList.length ) ? blockNavigationNext.addClass('inactive'):blockNavigationNext.removeClass('inactive');
}
function MQ(){
	return window.getComputedStyle(imageWrapper.get(0),'::before').getPropertyValue('content').replace(/'/g,"").replace(/"/g,"").split(',');
}
}
);

CSS代码(reset.css):

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main{display:block;}
body{line-height:1;}
ol,ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

CSS代码(style.css):

*,*::after,*::before{box-sizing:border-box;}
html{font-size:62.5%;}
body{font-size:1.6rem;font-family:"Source Sans Pro",sans-serif;color:#343642;background-color:#ffffff;}
a{color:#982b3c;text-decoration:none;}
button{cursor:pointer;border:none;background-color:transparent;outline:none;font-size:1.6rem;}
/* --------------------------------xnugget info-------------------------------- */
.cd-nugget-info a{position:fixed;right:calc(50% - 90px);bottom:3em;display:inline-block;width:180px;text-align:center;padding:1em;box-shadow:0 1px 10px rgba(0,0,0,0.2);border-radius:50em;background:#338899;font-size:14px;color:#ffffff;-webkit-transition:all 0.2s;-moz-transition:all 0.2s;transition:all 0.2s;z-index:100;}
.no-touch .cd-nugget-info a:hover{opacity:.8;}
.cd-nugget-info span{vertical-align:middle;display:inline-block;}
.cd-nugget-info span svg{display:block;}
.cd-nugget-info .cd-nugget-info-arrow{fill:#ffffff;}
@media only screen and (min-width:768px){.cd-nugget-info a{right:3em;padding:1.2em 1em;}
}
/* --------------------------------xcarbonads-------------------------------- */
#carbonads-container,#ui8ads-container{position:fixed;bottom:80px;left:3em;width:180px;display:none;z-index:100;}
#carbonads-container .close-carbon-adv,#carbonads-container .close-ui8-adv,#ui8ads-container .close-carbon-adv,#ui8ads-container .close-ui8-adv{display:inline-block;position:absolute;top:0;left:100%;background:rgba(0,0,0,0.5);text-indent:100%;overflow:hidden;width:32px;height:32px;}
#carbonads-container .close-carbon-adv:hover,#carbonads-container .close-ui8-adv:hover,#ui8ads-container .close-carbon-adv:hover,#ui8ads-container .close-ui8-adv:hover{background:rgba(0,0,0,0.8);}
#carbonads-container .close-carbon-adv::after,#carbonads-container .close-carbon-adv::before,#carbonads-container .close-ui8-adv::after,#carbonads-container .close-ui8-adv::before,#ui8ads-container .close-carbon-adv::after,#ui8ads-container .close-carbon-adv::before,#ui8ads-container .close-ui8-adv::after,#ui8ads-container .close-ui8-adv::before{content:'';background-color:#fff;height:2px;width:14px;position:absolute;top:14px;left:9px;}
#carbonads-container .close-carbon-adv::after,#carbonads-container .close-ui8-adv::after,#ui8ads-container .close-carbon-adv::after,#ui8ads-container .close-ui8-adv::after{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
#carbonads-container .close-carbon-adv::before,#carbonads-container .close-ui8-adv::before,#ui8ads-container .close-carbon-adv::before,#ui8ads-container .close-ui8-adv::before{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
#carbonads-container .carbonad,#carbonads-container .ui8ad,#ui8ads-container .carbonad,#ui8ads-container .ui8ad{background:rgba(255,255,255,0.9);border:none;width:100%;height:auto;padding:14px;text-align:center;border-radius:3px 0 3px 3px;box-shadow:0 0 20px rgba(0,0,0,0.1);}
#carbonads-container .carbonad .carbonad-image img,#carbonads-container .carbonad .ui8ad-image img,#carbonads-container .ui8ad .carbonad-image img,#carbonads-container .ui8ad .ui8ad-image img,#ui8ads-container .carbonad .carbonad-image img,#ui8ads-container .carbonad .ui8ad-image img,#ui8ads-container .ui8ad .carbonad-image img,#ui8ads-container .ui8ad .ui8ad-image img{width:130px;}
#carbonads-container .carbonad .carbonad-image img,#carbonads-container .ui8ad .carbonad-image img,#ui8ads-container .carbonad .carbonad-image img,#ui8ads-container .ui8ad .carbonad-image img{margin:0 0 10px 10px;}
#carbonads-container .carbonad .ui8ad-image img,#carbonads-container .ui8ad .ui8ad-image img,#ui8ads-container .carbonad .ui8ad-image img,#ui8ads-container .ui8ad .ui8ad-image img{margin:0 10px 10px;width:130px;}
#carbonads-container .carbonad .carbonad-text,#carbonads-container .carbonad .carbonad-tag,#carbonads-container .carbonad .ui8ad-text,#carbonads-container .carbonad .ui8ad-tag,#carbonads-container .ui8ad .carbonad-text,#carbonads-container .ui8ad .carbonad-tag,#carbonads-container .ui8ad .ui8ad-text,#carbonads-container .ui8ad .ui8ad-tag,#ui8ads-container .carbonad .carbonad-text,#ui8ads-container .carbonad .carbonad-tag,#ui8ads-container .carbonad .ui8ad-text,#ui8ads-container .carbonad .ui8ad-tag,#ui8ads-container .ui8ad .carbonad-text,#ui8ads-container .ui8ad .carbonad-tag,#ui8ads-container .ui8ad .ui8ad-text,#ui8ads-container .ui8ad .ui8ad-tag{font-family:'Helvetica Neue',Arial,sans-serif;}
#carbonads-container .carbonad .carbonad-text,#carbonads-container .carbonad .ui8ad-text,#carbonads-container .ui8ad .carbonad-text,#carbonads-container .ui8ad .ui8ad-text,#ui8ads-container .carbonad .carbonad-text,#ui8ads-container .carbonad .ui8ad-text,#ui8ads-container .ui8ad .carbonad-text,#ui8ads-container .ui8ad .ui8ad-text{display:block;width:100%;padding:0;}
#carbonads-container .carbonad .carbonad-text a,#carbonads-container .carbonad .ui8ad-text a,#carbonads-container .ui8ad .carbonad-text a,#carbonads-container .ui8ad .ui8ad-text a,#ui8ads-container .carbonad .carbonad-text a,#ui8ads-container .carbonad .ui8ad-text a,#ui8ads-container .ui8ad .carbonad-text a,#ui8ads-container .ui8ad .ui8ad-text a{color:#982b3c;font-size:13px;font-weight:bold;}
.no-touch #carbonads-container .carbonad .carbonad-text a:hover,.no-touch#carbonads-container .carbonad .ui8ad-text a:hover,.no-touch#carbonads-container .ui8ad .carbonad-text a:hover,.no-touch#carbonads-container .ui8ad .ui8ad-text a:hover,.no-touch#ui8ads-container .carbonad .carbonad-text a:hover,.no-touch#ui8ads-container .carbonad .ui8ad-text a:hover,.no-touch#ui8ads-container .ui8ad .carbonad-text a:hover,.no-touch#ui8ads-container .ui8ad .ui8ad-text a:hover{text-decoration:underline;}
#carbonads-container .carbonad .carbonad-tag,#carbonads-container .carbonad .ui8ad-tag,#carbonads-container .ui8ad .carbonad-tag,#carbonads-container .ui8ad .ui8ad-tag,#ui8ads-container .carbonad .carbonad-tag,#ui8ads-container .carbonad .ui8ad-tag,#ui8ads-container .ui8ad .carbonad-tag,#ui8ads-container .ui8ad .ui8ad-tag{margin-top:5px;color:#343642;}
#carbonads-container .carbonad .carbonad-tag a,#carbonads-container .carbonad .ui8ad-tag a,#carbonads-container .ui8ad .carbonad-tag a,#carbonads-container .ui8ad .ui8ad-tag a,#ui8ads-container .carbonad .carbonad-tag a,#ui8ads-container .carbonad .ui8ad-tag a,#ui8ads-container .ui8ad .carbonad-tag a,#ui8ads-container .ui8ad .ui8ad-tag a{color:#343642;}
#carbonads-container .carbonad .carbonad-tag a:hover,#carbonads-container .carbonad .ui8ad-tag a:hover,#carbonads-container .ui8ad .carbonad-tag a:hover,#carbonads-container .ui8ad .ui8ad-tag a:hover,#ui8ads-container .carbonad .carbonad-tag a:hover,#ui8ads-container .carbonad .ui8ad-tag a:hover,#ui8ads-container .ui8ad .carbonad-tag a:hover,#ui8ads-container .ui8ad .ui8ad-tag a:hover{color:#982b3c;}
#carbonads-container .carbonad .ui8ad-tag,#carbonads-container .ui8ad .ui8ad-tag,#ui8ads-container .carbonad .ui8ad-tag,#ui8ads-container .ui8ad .ui8ad-tag{display:inline-block;font-size:11px;line-height:15px;}
@media only screen and (min-width:768px){#carbonads-container,#ui8ads-container{display:block;}
}
/* --------------------------------Images block-------------------------------- */
.cd-image-block{position:relative;}
.cd-image-block::before{/* this is the layer used to cover the .cd-image-block when the content block becomes visible - mobile only */
 content:'';position:absolute;top:0;left:0;height:100%;width:100%;background-color:rgba(52,54,66,0.6);opacity:0;visibility:hidden;-webkit-transition:opacity 0.3s 0s,visibility 0s 0.3s;-moz-transition:opacity 0.3s 0s,visibility 0s 0.3s;transition:opacity 0.3s 0s,visibility 0s 0.3s;}
.cd-image-block.content-block-is-visible::before{opacity:1;visibility:visible;-webkit-transition:opacity 0.3s 0s,visibility 0s 0s;-moz-transition:opacity 0.3s 0s,visibility 0s 0s;transition:opacity 0.3s 0s,visibility 0s 0s;}
@media only screen and (min-width:768px){.cd-image-block::before{display:none;}
}
.cd-images-list::before{/* never visible - this is used in jQuery to check the current MQ */
 content:'mobile';display:none;}
.cd-images-list > li{height:250px;background:#979c9c url(../img/img-1.jpg) no-repeat center center;background-size:cover;}
.cd-images-list > li:nth-of-type(2){background:#343642 url(../img/img-2.jpg) no-repeat center center;background-size:cover;}
.cd-images-list > li:nth-of-type(3){background:#982b3c url(../img/img-3.jpg) no-repeat center center;background-size:cover;}
.cd-images-list > li:nth-of-type(4){background:#338899 url(../img/img-4.jpg) no-repeat center center;background-size:cover;}
.cd-images-list > li > a{/* used to vertically align the h2 child - mobile version only */
 display:table;height:100%;width:100%;}
.cd-images-list h2{/* used to vertically align h2 - mobile version only */
 display:table-cell;vertical-align:middle;text-align:center;font-size:3rem;color:#ffffff;font-weight:700;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
@media only screen and (min-width:768px){.cd-images-list::before{/* never visible - this is used in jQuery to check the current MQ */
 content:'desktop';}
.cd-images-list > li > a{display:block;padding:4em 3em;cursor:default;pointer-events:none;}
.cd-images-list h2{font-size:5.5rem;text-align:left;}
}
/* --------------------------------Content block-------------------------------- */
.cd-content-block{/* move the block outside the viewport (to the right) - mobile only */
 position:fixed;z-index:1;top:0;left:0;height:100%;-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;}
.cd-content-block.is-visible{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
.cd-content-block > ul{height:100%;}
.cd-content-block > ul > li{position:absolute;height:100%;padding:2em;overflow-y:scroll;background-color:#ffffff;opacity:0;visibility:hidden;}
.cd-content-block > ul > li.is-selected{/* this is the selected content */
 position:relative;opacity:1;visibility:visible;-webkit-overflow-scrolling:touch;}
.cd-content-block h2{line-height:1.2;font-weight:700;font-size:2.3rem;margin-bottom:1em;}
.cd-content-block p{margin-bottom:2em;line-height:1.6;color:#85868d;}
.cd-content-block .cd-close{/* 'X' icon to close the content block - mobile only */
 position:fixed;top:0;right:0;height:44px;width:44px;/* image replacement */
 overflow:hidden;text-indent:100%;white-space:nowrap;color:transparent;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform 0.2s;-moz-transition:-moz-transform 0.2s;transition:transform 0.2s;}
.cd-content-block .cd-close::after,.cd-content-block .cd-close::before{/* these are the 2 lines of the 'X' icon */
 content:'';position:absolute;left:50%;top:50%;width:2px;height:24px;background-color:#343642;/* Force Hardware Acceleration */
 -webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);}
.cd-content-block .cd-close::after{-webkit-transform:translateX(-50%) translateY(-50%) rotate(45deg);-moz-transform:translateX(-50%) translateY(-50%) rotate(45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(45deg);-o-transform:translateX(-50%) translateY(-50%) rotate(45deg);transform:translateX(-50%) translateY(-50%) rotate(45deg);}
.cd-content-block .cd-close::before{-webkit-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-moz-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-ms-transform:translateX(-50%) translateY(-50%) rotate(-45deg);-o-transform:translateX(-50%) translateY(-50%) rotate(-45deg);transform:translateX(-50%) translateY(-50%) rotate(-45deg);}
.cd-content-block .cd-close.is-scaled-up{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}
.no-touch .cd-content-block .cd-close.is-scaled-up:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);-o-transform:scale(1.2);transform:scale(1.2);}
@media only screen and (min-width:768px){.cd-content-block{/* reset style */
 position:static;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
.cd-content-block > ul > li{/* reset style */
 opacity:1;visibility:visible;padding:4em 3em;}
.cd-content-block > ul > li.overflow-hidden{/* this class is used during the animation (slider change) to hide the scrolling bar */
 overflow:hidden;}
.cd-content-block h2{font-size:3rem;}
.cd-content-block .cd-close{display:none;}
}
/* ----------------------------------------------Desktop slider - both image and content blocks---------------------------------------------- */
@media only screen and (min-width:768px){.cd-image-block,.cd-content-block{/* slider style - desktop version only */
 width:50%;float:left;height:100vh;overflow:hidden;}
.cd-image-block > ul,.cd-content-block > ul{position:relative;height:100%;}
.cd-image-block > ul > li,.cd-content-block > ul > li{position:absolute;top:0;left:0;height:100%;width:100%;/* Force Hardware Acceleration */
 -webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;will-change:transform;/* by default,the items are moved to the right - relative to their parent elements */
 -webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 0.5s;-moz-transition:-moz-transform 0.5s;transition:transform 0.5s;}
.cd-image-block > ul > li.is-selected,.cd-content-block > ul > li.is-selected{/* this is the visible item */
 position:absolute;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
.cd-image-block > ul > li.move-left,.cd-content-block > ul > li.move-left{/* this is the item hidden on the left */
 -webkit-transform:translateX(-100%);-moz-transform:translateX(-100%);-ms-transform:translateX(-100%);-o-transform:translateX(-100%);transform:translateX(-100%);}
}
/* --------------------------------Slider navigation-------------------------------- */
.block-navigation{/* this is the slider navigation - desktop version only */
 display:none;}
@media only screen and (min-width:768px){.block-navigation{display:block;position:fixed;bottom:0;left:0;width:50%;}
.block-navigation::after{clear:both;content:"";display:table;}
.block-navigation li{width:50%;height:50px;line-height:50px;text-align:center;background-color:rgba(0,0,0,0.5);-webkit-transition:background 0.2s;-moz-transition:background 0.2s;transition:background 0.2s;}
.block-navigation li:hover{background-color:rgba(0,0,0,0.7);}
.block-navigation li:first-of-type{float:left;}
.block-navigation li:last-of-type{float:right;}
.block-navigation button{display:block;height:100%;width:100%;color:#ffffff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.block-navigation button.inactive{opacity:.3;cursor:not-allowed;}
}
/* --------------------------------Javascript disabled-------------------------------- */
@media only screen and (min-width:768px){.no-js .cd-content-block{display:none;}
.no-js .cd-image-block{width:100%;overflow:visible;}
.no-js .cd-images-list::after{clear:both;content:"";display:table;}
.no-js .cd-images-list > li{position:static;width:50%;float:left;height:400px;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
.no-js .cd-images-list > li.is-selected{position:static;}
.no-js .cd-images-list > li > a{cursor:pointer;pointer-events:auto;}
.no-js .block-navigation{display:none;}
}

附件:下载该文件资源,减少时间成本(增值服务)