jQuery滑动块状区域覆盖切换代码

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

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

以下是 jQuery滑动块状区域覆盖切换代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html lang="zh" class="no-js">
<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>jQuery滑动块状区域覆盖切换代码</title>
<!--<link href='https://fonts.useso.com/css?family=Fira+Sans:400,300,700' rel='stylesheet' type='text/css'>-->
<link rel="stylesheet" href="css/reset.css"> <!-- CSS reset -->
<link rel="stylesheet" href="css/style.css"> <!-- Resource style -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
</head>
<body>
<div class="cd-slider-wrapper">
	<ul class="cd-slider">
		<li class="is-visible">
			<div class="cd-half-block image"></div>
		</li> <!-- .cd-half-block.content -->

		<li>
			<div class="cd-half-block image"></div>

			<div class="cd-half-block content light-bg">
				<div>
					<h2>Slide Number 2</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugit ullam voluptatum tenetur ab, non beatae, impedit dolorem itaque voluptates facilis necessitatibus suscipit dolor rerum dolores dignissimos alias facere sunt aliquid.
					</p>
				</div>
			</div> <!-- .cd-half-block.content -->
		</li>

		<li>
			<div class="cd-half-block image"></div>

			<div class="cd-half-block content">
				<div>
					<h2>Slide Number 3</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugit ullam voluptatum tenetur ab, non beatae, impedit dolorem itaque voluptates facilis necessitatibus suscipit dolor rerum dolores dignissimos alias facere sunt aliquid.
					</p>
				</div>
			</div> <!-- .cd-half-block.content -->
		</li>

		<li>
			<div class="cd-half-block image"></div>

			<div class="cd-half-block content">
				<div>
					<h2>Slide Number 4</h2>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugit ullam voluptatum tenetur ab, non beatae, impedit dolorem itaque voluptates facilis necessitatibus suscipit dolor rerum dolores dignissimos alias facere sunt aliquid.
					</p>
				</div>
			</div> <!-- .cd-half-block.content -->
		</li>
	</ul> <!-- .cd-slider -->
</div> <!-- .cd-slider-wrapper -->
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

JS代码(main.js):

jQuery(document).ready(function($){
	var sliderContainers = $('.cd-slider-wrapper');
	if( sliderContainers.length > 0 ) initBlockSlider(sliderContainers);
	function initBlockSlider(sliderContainers){
	sliderContainers.each(function(){
	var sliderContainer = $(this),slides = sliderContainer.children('.cd-slider').children('li'),sliderPagination = createSliderPagination(sliderContainer);
	sliderPagination.on('click',function(event){
	event.preventDefault();
	var selected = $(this),index = selected.index();
	updateSlider(index,sliderPagination,slides);
}
);
	sliderContainer.on('swipeleft',function(){
	var bool = enableSwipe(sliderContainer),visibleSlide = sliderContainer.find('.is-visible').last(),visibleSlideIndex = visibleSlide.index();
	if(!visibleSlide.is(':last-child') && bool){
	updateSlider(visibleSlideIndex + 1,sliderPagination,slides);
}
}
);
	sliderContainer.on('swiperight',function(){
	var bool = enableSwipe(sliderContainer),visibleSlide = sliderContainer.find('.is-visible').last(),visibleSlideIndex = visibleSlide.index();
	if(!visibleSlide.is(':first-child') && bool){
	updateSlider(visibleSlideIndex - 1,sliderPagination,slides);
}
}
);
}
);
}
function createSliderPagination(container){
	var wrapper = $('<ol class="cd-slider-navigation"></ol>');
	container.children('.cd-slider').find('li').each(function(index){
	var dotWrapper = (index == 0) ? $('<li class="selected"></li>'):$('<li></li>'),dot = $('<a href="#0"></a>').appendTo(dotWrapper);
	dotWrapper.appendTo(wrapper);
	var dotText = ( index+1 < 10 ) ? '0'+ (index+1):index+1;
	dot.text(dotText);
}
);
	wrapper.appendTo(container);
	return wrapper.children('li');
}
function updateSlider(n,navigation,slides){
	navigation.removeClass('selected').eq(n).addClass('selected');
	slides.eq(n).addClass('is-visible').removeClass('covered').prevAll('li').addClass('is-visible covered').end().nextAll('li').removeClass('is-visible covered');
	//fixes a bug on Firefox with ul.cd-slider-navigation z-indexnavigation.parent('ul').addClass('slider-animating').on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
	$(this).removeClass('slider-animating');
}
);
}
function enableSwipe(container){
	return ( container.parents('.touch').length > 0 );
}
}
);

CSS代码(reset.css):

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License:none (public domain)*/
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):

/* --------------------------------Primary style-------------------------------- */
*,*::after,*::before{box-sizing:border-box;}
html{font-size:62.5%;}
body{font-size:1.6rem;font-family:"Fira Sans",sans-serif;color:#767070;background-color:#ffffff;}
a{color:#ccd0c1;text-decoration:none;}
/* --------------------------------Slider-------------------------------- */
.cd-slider-wrapper{position:relative;height:100vh;padding:10px;}
@media only screen and (min-width:900px){.cd-slider-wrapper{padding:30px;}
}
.cd-slider{position:relative;z-index:1;height:100%;overflow:hidden;}
.cd-slider li{position:absolute;top:0;left:0;height:100%;width: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.6s;-moz-transition:-moz-transform 0.6s;transition:transform 0.6s;}
.cd-slider li.is-visible{-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);}
.cd-slider .cd-half-block{height:50%;background-position:center center;background-repeat:no-repeat;}
.cd-slider li:first-of-type .image{background-image:url(../img/img-1.jpg);}
.cd-slider li:nth-of-type(2) .image{background-image:url(../img/img-2.jpg);}
.cd-slider li:nth-of-type(3) .image{background-image:url(../img/img-3.jpg);}
.cd-slider li:nth-of-type(4) .image{background-image:url(../img/img-4.jpg);}
.cd-slider .image{background-size:cover;}
.cd-slider .content{padding:30px;color:#ffffff;background-color:#767070;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cd-slider .light-bg{color:rgba(0,0,0,0.6);}
.cd-slider .btn{display:inline-block;background:rgba(0,0,0,0.2);padding:1em 1.6em;margin-top:1em;font-size:1.3rem;color:#ffffff;border-radius:50em;-webkit-transition:background 0.3s;-moz-transition:background 0.3s;transition:background 0.3s;}
.no-touch .cd-slider .btn:hover{background:rgba(0,0,0,0.6);}
.cd-slider li:nth-of-type(2) .content{background-color:#ccd0c1;}
.cd-slider li:nth-of-type(3) .content{background-color:#f3b96c;}
.cd-slider li:nth-of-type(4) .content{background-color:#f46c6a;}
.cd-slider h2{font-size:2.2rem;margin-bottom:.4em;}
.cd-slider p{font-size:1.4rem;}
.cd-slider h2,.cd-slider p{line-height:1.4;}
@media only screen and (min-width:900px){.cd-slider li{pointer-events:none;z-index:1;-webkit-transform:translateX(0);-moz-transform:translateX(0);-ms-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0);-webkit-transition:z-index 0s 0.6s;-moz-transition:z-index 0s 0.6s;transition:z-index 0s 0.6s;}
.cd-slider li.is-visible{pointer-events:auto;z-index:3;-webkit-transition:z-index 0s 0s;-moz-transition:z-index 0s 0s;transition:z-index 0s 0s;}
.cd-slider li.is-visible.covered{/* list item still there,but covered by the list item entering the viewport (.is-visible) */
 z-index:2;}
.cd-slider .cd-half-block{height:100%;width:50%;float:right;}
.cd-slider .cd-half-block.content{-webkit-transform:translateX(200%);-moz-transform:translateX(200%);-ms-transform:translateX(200%);-o-transform:translateX(200%);transform:translateX(200%);-webkit-transition:-webkit-transform 0.6s 0s ease-in-out;-moz-transition:-moz-transform 0.6s 0s ease-in-out;transition:transform 0.6s 0s ease-in-out;}
.cd-slider .cd-half-block.image{-webkit-transform:translateX(100%);-moz-transform:translateX(100%);-ms-transform:translateX(100%);-o-transform:translateX(100%);transform:translateX(100%);-webkit-transition:-webkit-transform 0s 0.3s;-moz-transition:-moz-transform 0s 0.3s;transition:transform 0s 0.3s;}
.cd-slider li.is-visible .cd-half-block.content,.cd-slider li.is-visible .cd-half-block.image{-webkit-transform:translateX(0%);-moz-transform:translateX(0%);-ms-transform:translateX(0%);-o-transform:translateX(0%);transform:translateX(0%);}
.cd-slider li.is-visible .cd-half-block.content{-webkit-transition:-webkit-transform 0.6s 0s ease-in-out;-moz-transition:-moz-transform 0.6s 0s ease-in-out;transition:transform 0.6s 0s ease-in-out;}
.cd-slider .content{/* vertically align its content */
 display:table;padding:0 40px;}
.cd-slider .content > div{/* vertically align <div> inside div.content */
 display:table-cell;vertical-align:middle;}
.cd-slider .btn{padding:1.4em 2em;font-size:1.4rem;}
.cd-slider p{font-size:1.6rem;}
.cd-slider h2{font-size:3.5rem;margin-bottom:0;}
.cd-slider h2,.cd-slider p{line-height:2;}
}
@media only screen and (min-width:1170px){.cd-slider .content{padding:0 90px;}
.cd-slider h2{font-weight:300;}
}
/* --------------------------------Slider Navigation-------------------------------- */
.cd-slider-navigation{/* you won't see this element in the html but it will be created using jQuery */
 position:absolute;z-index:3;left:50%;right:auto;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%);bottom:30px;}
.cd-slider-navigation li{display:inline-block;margin:0 .25em;}
.cd-slider-navigation li.selected a{background-color:#ffffff;}
.cd-slider-navigation a{display:block;height:8px;width:8px;border-radius:50%;color:transparent;/* image replacement */
 white-space:nowrap;text-indent:100%;overflow:hidden;border:1px solid #ffffff;}
@media only screen and (min-width:900px){.cd-slider-navigation{padding:0.5em 1em;background-color:rgba(0,0,0,0.8);/* fixes a bug on Firefox with ul.cd-slider-navigation z-index */
 -webkit-transform:translateZ(2px) translateX(-50%);-moz-transform:translateZ(2px) translateX(-50%);-ms-transform:translateZ(2px) translateX(-50%);-o-transform:translateZ(2px) translateX(-50%);transform:translateZ(2px) translateX(-50%);-webkit-transition:-webkit-transform 0.3s;-moz-transition:-moz-transform 0.3s;transition:transform 0.3s;}
.cd-slider-navigation.slider-animating{/* fixes a bug on Firefox with ul.cd-slider-navigation z-index */
 -webkit-transform:translateX(-50%) scale(1);-moz-transform:translateX(-50%) scale(1);-ms-transform:translateX(-50%) scale(1);-o-transform:translateX(-50%) scale(1);transform:translateX(-50%) scale(1);}
.cd-slider-navigation a{height:40px;width:40px;line-height:40px;text-align:center;/* reset style */
 text-indent:0;border:none;border-radius:0;color:#ffffff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.cd-slider-navigation li.selected a{background-color:transparent;color:#f3b96c;}
}

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