jQuery扑克牌切换焦点图轮播滚动切换特效代码

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

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

以下是 jQuery扑克牌切换焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.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>jQuery扑克牌切换焦点图代码</title>
<link rel="stylesheet" href="css/MxSlider.css">
<style>
	/* Styles for Bugs Bunny */
	body{
		background-color: #bed1e4;
	}
	.mx-bugs_bunny{
		width: 90%;
		max-width: 700px;
		margin: 40px auto;				
	}
	.ZI-slider{
		border: 4px solid #27425d;
	}
	.mx-bugs_info{
		position: absolute;
		display: block;
		max-width: 80%;
		padding: 10px;
		bottom: 40px;
		background-color: rgba(39, 66, 93, 0.9);			
	}
	.mx-bugs_info a{				
		font-family: 'Oswald', sans-serif;
		color: #fff;
		font-size: 18px;
		text-decoration: none;
	}
	.mx-navigation {
		margin: 4px;
		top: 42%;
	}
	.mx-prev, .mx-next{
		background-color: #27425d;
	}
	.mx-prev{
		background-image: url(img/arr_l.png);
		background-repeat: no-repeat;
		background-position: 2px 5px;
	}
	.mx-next{
		background-image: url(img/arr_r.png);
		background-repeat: no-repeat;
		background-position: 8px 5px;
	}
	.mx-nav_dots{
		top: 88%;				
	}
	.mx-nav_dots span{
		margin: 0px 4px;
		border-radius: 50%;
		-moz-border-radius: 50%;
		-webkit-border-radius: 50%;
		border: 3px solid #27425d;
		background-color: #fff;
	}
	.mx-nav_dots span.dotActive{
		background-color: #27425d;
	}			
</style>

</head>
<body>
<!-- My box for the slider -->
<div class="mx-bugs_bunny">
	<!-- Slider -->
	<div class="ZI-slider">
		<div>
			<img src="img/slide1.jpg" alt="" />
			<div class="mx-bugs_info">
				<a href="#" target="_blank">
					This article is about the adult version of Bugs Bunny. For the baby version of the character seen in Baby Looney Tunes, see Baby Bugs.
				</a>
			</div>
		</div>
		<div>
			<img src="img/slide2.jpg" alt="" />
			<div class="mx-bugs_info">
				<a href="#" target="_blank">
					Bugs Bunny is an animated cartoon character, created in 1940 by Leon Schlesinger Productions
				</a>
			</div>
		</div>
		<div>
			<img src="img/slide3.jpg" alt="" />
			<div class="mx-bugs_info">
				<a href="#" target="_blank">
					Watch This Smart Video on How Bugs Bunny Went From Ordinary Looney Tunes Character to American Icon
				</a>
			</div>
		</div>
	</div>
	<!-- Slider -->
</div>
<!-- My box for the slider -->

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/MxSlider.js"></script>	
<script type="text/javascript">
$(document).ready(function(){		
	$( '.ZI-slider' ).MxSlider( {
		autoPlay: true,
		dots: true,
		timeSlide: 500
	} );
})
</script>
</body>
</html>

JS代码(MxSlider.js):

/** ###################################################* # #* # Author:Marko Maksym #* M WebSite:http://blognauki.in.ua/my-works/ M* # Project name:MX-SLIDER #* # E-mail:markomaksym@gmail.com #* X Date of creation:04.10.2016 X* # Last Modified:#* # #* ###################################################*/
;
	( function( $ ){
	$.defaultConfig ={
	nav:true,// create forward and backward buttons. If set to "false",the navigation will not bedots:false,// buttons to navigatetimeSlide:1000,// the length of timeautoPlay:false,// autoPlayautoPlaySpeed:5000 // autoPlay speed}
;
	$.fn.MxSlider = function( params ){
	var settings = $.extend({
}
,$.defaultConfig,params );
	SliderPerform( this,settings );
}
;
	function SliderPerform( root,settings ){
	/* ---------------------------------------------* Create slider----------------------------------------------*/
varcountSlide,heightSlide,CreateSlider ={
	CreateClass:function(){
	root.addClass( 'mx-slider_wrap' );
}
,CreateWrap:function(){
	root.wrap( '<div class="MxSlider"></div>' );
}
,CreateNavigation:function(){
	if( settings.nav == true ){
	$( '<div class="mx-navigation"><div class="mx-prev">Предыдущий</div><div class="mx-next">Следующий</div></div>' ).appendTo( '.MxSlider' );
}
}
,CreateItemSlider:function(){
	root.children().addClass( 'mx-slide' );
}
,GetHeightItem:function(){
	heightSlide = root.children().eq(0).height() - 4;
	setTimeout( function(){
	root.css( 'height',heightSlide + 'px' );
}
,500 );
}
,GetCountSlide:function(){
	countSlide = root.children( '.mx-slide' ).length;
}
,SetZIndex:function(){
	var i = countSlide;
	$( '.mx-slide' ).each( function(){
	$(this).css( 'z-index',i-- );
}
);
}
,CreateDonsNavigation:function(){
	if( settings.dots == true ){
	$( '<div class="mx-nav_dots"></div>' ).appendTo( '.MxSlider' );
	var d = 1;
	$( '.mx-slide' ).each( function(){
	$( '<span>' + d + '</span>' ).appendTo( '.mx-nav_dots' );
	d++;
}
);
	$( '.mx-nav_dots span' ).eq( 0 ).addClass( 'dotActive' );
}
}
,// Init functioninit:function(){
	// add classthis.CreateClass();
	// create wrapperthis.CreateWrap();
	// add class children itemthis.CreateItemSlider();
	// get count slidesthis.GetCountSlide();
	// set z-index for slidethis.SetZIndex();
	// get heightthis.GetHeightItem();
	// create navigationthis.CreateNavigation();
	// create dots-navigationthis.CreateDonsNavigation();
}
}
;
	/* Initialise */
CreateSlider.init();
	/* -------------------------------------------------* Functions slider--------------------------------------------------*/
// func play nextfunction PlayNext(){
	if( keyMotion == true ){
	keyMotion = false;
	$( '.mx-slide' ).each( function(){
	if( $( this ).css( 'z-index' ) == countSlide ){
	$( this ).animate({
	'left':'-100%'}
,settings.timeSlide );
}
}
);
	setTimeout( function(){
	$( '.mx-slide' ).each( function(){
	getZi = $( this ).css( 'z-index' );
	$( this ).css( 'z-index',parseInt( getZi ) + 1 );
}
);
	$( '.mx-slide' ).each( function(){
	if( $( this ).css( 'z-index' ) == countSlide + 1 ){
	$( this ).css( 'z-index','1' );
	$( this ).css( 'left','0%' );
}
}
);
	// dots activeif( settings.dots == true ){
	$( '.mx-slide' ).each( function(){
	zInex = $( this ).css( 'z-index' );
	if( zInex == countSlide ){
	nthChild = $( this ).index();
	if( nthChild == countSlide ){
	nthChild = 0;
}
$( '.mx-nav_dots span' ).removeClass( 'dotActive' );
	$( '.mx-nav_dots span' ).eq( nthChild ).addClass( 'dotActive' );
}
}
);
}
keyMotion = true;
}
,settings.timeSlide + 100 );
}
}
// func play backfunction PlayBack(){
	if( keyMotion == true ){
	keyMotion = false;
	$( '.mx-slide' ).each( function(){
	if( $( this ).css( 'z-index' ) == 1 ){
	$( this ).css( 'left','-100%' );
}
}
);
	setTimeout( function(){
	$( '.mx-slide' ).each( function(){
	getZi = $( this ).css( 'z-index' );
	$( this ).css( 'z-index',parseInt( getZi ) - 1 );
}
);
	$( '.mx-slide' ).each( function(){
	if( $( this ).css( 'z-index' ) == 0 ){
	$( this ).css( 'z-index',countSlide );
	$( this ).animate({
	'left':'0%'}
,settings.timeSlide );
}
}
);
}
,100 );
	setTimeout( function(){
	// dots activeif( settings.dots == true ){
	$( '.mx-slide' ).each( function(){
	zInex = $( this ).css( 'z-index' );
	if( zInex == countSlide ){
	var nthChild = $( this ).index();
	$( '.mx-nav_dots span' ).removeClass( 'dotActive' );
	$( '.mx-nav_dots span' ).eq( nthChild ).addClass( 'dotActive' );
}
}
);
}
keyMotion = true;
}
,settings.timeSlide + 200 );
}
}
// func autoplayfunction AutoPlay(){
	if( settings.autoPlay == true ){
	autoPlayInit = setInterval( function(){
	PlayNext();
}
,settings.autoPlaySpeed );
}
}
// func autoplay amendfunction AutoPlayAmend(){
	clearInterval( autoPlayInit );
	AutoPlay();
}
/*-------------------------------------------------* Functional init--------------------------------------------------*/
varkeyMotion = true,autoPlayInit = null,MotionSlide ={
	NextSlide:function(){
	$( '.mx-next' ).on( 'click',function(){
	PlayNext();
	AutoPlayAmend();
}
);
}
,PrevSlide:function(){
	$( '.mx-prev' ).on( 'click',function(){
	PlayBack();
	AutoPlayAmend();
}
);
}
,AutoPlayInt:function(){
	AutoPlay();
}
,DotsMotion:function(){
	$( '.mx-nav_dots span' ).on( 'click',function(){
	AutoPlayAmend();
	var thisDonNum = $( this ).text(),thisSilderNth;
	$( '.mx-slide' ).each( function(){
	thisSilderZI = parseInt( $( this ).css( 'z-index' ) );
	if( thisSilderZI == countSlide ){
	thisSilderNth = $( this ).index() + 1;
}
}
);
	if( thisSilderNth < thisDonNum && keyMotion == true ){
	var dotIntervalNext = setInterval( function(){
	keyMotion = false;
	if( thisSilderNth != thisDonNum ){
	$( '.mx-slide' ).each( function(){
	if( $( this ).css( 'z-index' ) == countSlide ){
	$( this ).animate({
	'left':'-100%'}
,200 );
}
}
);
	setTimeout( function(){
	$( '.mx-slide' ).each( function(){
	getZi = $( this ).css( 'z-index' );
	$( this ).css( 'z-index',parseInt( getZi ) + 1 );
}
);
	$( '.mx-slide' ).each( function(){
	if( $( this ).css( 'z-index' ) == countSlide + 1 ){
	$( this ).css( 'z-index','1' );
	$( this ).css( 'left','0%' );
}
}
);
	// dots activeif( settings.dots == true ){
	$( '.mx-slide' ).each( function(){
	zInex = $( this ).css( 'z-index' );
	if( zInex == countSlide ){
	nthChild = $( this ).index();
	$( '.mx-nav_dots span' ).removeClass( 'dotActive' );
	$( '.mx-nav_dots span' ).eq( nthChild ).addClass( 'dotActive' );
}
}
);
}
}
,300 );
}
else{
	clearInterval( dotIntervalNext );
	keyMotion = true;
}
thisSilderNth++;
}
,400 );
}
else if( thisSilderNth > thisDonNum && keyMotion == true ){
	vardotIntervalPrev = setInterval( function(){
	keyMotion = false;
	if( thisSilderNth != thisDonNum ){
	$( '.mx-slide' ).each( function(){
	if( $( this ).css( 'z-index' ) == 1 ){
	$( this ).css( 'left','-100%' );
}
}
);
	setTimeout( function(){
	$( '.mx-slide' ).each( function(){
	getZi = $( this ).css( 'z-index' );
	$( this ).css( 'z-index',parseInt( getZi ) - 1 );
}
);
	$( '.mx-slide' ).each( function(){
	if( $( this ).css( 'z-index' ) == 0 ){
	$( this ).css( 'z-index',countSlide );
	$( this ).animate({
	'left':'0%'}
,200 );
}
}
);
	// dots activeif( settings.dots == true ){
	$( '.mx-slide' ).each( function(){
	zInex = $( this ).css( 'z-index' );
	if( zInex == countSlide ){
	nthChild = $( this ).index();
	$( '.mx-nav_dots span' ).removeClass( 'dotActive' );
	$( '.mx-nav_dots span' ).eq( nthChild ).addClass( 'dotActive' );
}
}
);
}
}
,100 );
}
else{
	clearInterval( dotIntervalPrev );
	keyMotion = true;
}
thisSilderNth--;
}
,400 );
}
}
);
}
,// Motion functionContrMotion:function(){
	// next sliderthis.NextSlide();
	// prev sliderthis.PrevSlide();
	// autoPlaythis.AutoPlayInt();
	// dotsthis.DotsMotion();
}
}
;
	/* Controller */
MotionSlide.ContrMotion();
	// responsivevar resize;
	$( window ).resize( function(){
	clearTimeout( resize );
	resize = setTimeout( function(){
	heightSlide = root.children().eq(0).height() - 4;
	root.css( 'height',heightSlide + 'px' );
}
,600 );
}
);
}
}
)( jQuery );

CSS代码(MxSlider.css):

/** ###################################################* # #* # Author:Marko Maksym #* M WebSite:http://blognauki.in.ua/my-works/ M* # Project name:MX-SLIDER #* # E-mail:markomaksym@gmail.com #* X Date of creation:04.10.2016 X* # Last Modified:#* # #* ###################################################*/
.MxSlider{width:100%;float:left;position:relative;}
.mx-slider_wrap{position:relative;display:block;float:left;width:100%;height:auto;margin:0px auto;overflow:hidden;}
.mx-slide{position:absolute;width:100%;display:table;float:left;left:0%;}
.mx-slide img{width:100%;}
/* Navigation */
.mx-navigation{position:absolute;float:left;width:100%;top:47%;z-index:888;}
.mx-prev,.mx-next{display:table;width:40px;height:40px;background-color:#fff;font-size:0px;cursor:pointer;}
.mx-prev{float:left;}
.mx-next{float:right;}
.mx-nav_dots{position:absolute;width:100%;top:85%;text-align:center;z-index:889;}
.mx-nav_dots span{display:inline-block;width:15px;height:15px;margin:3px;font-size:0px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;border:2px solid #333;background-color:#fff;cursor:pointer;}
.mx-nav_dots span.dotActive{background-color:#333;}

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