آموزش ساخت یک اسلایدشو با CSS و جاوااسکریپت
آموزش ساخت اسلاید شو با CSS و جاوااسکریپت

آموزش ساخت یک اسلایدشو با CSS و جاوااسکریپت

ما در این آموزش به شما نحوه ایجاد یک اسلایدشو را می دهیم که شما میتوانید از آن برای انواع وبسایت استفاده نمایید.از ویژگی های این اسلایدشو، سادگی و در عین حال زیبا بودن آن میباشد و همچنین شما میتوانید در آن برای هر اسلاید آدرس داده تا کاربران خود را به آدرس آن اسلاید راهنمایی نمایید.

برای مشاهده لینک وارد شود

 اسلایدشو ما دارای یک محفظه() شامل کلاس و آی دی “Slideshow” میباشد که ما میتوانیم از یک لیست مرتب برای اسلایدهای خود استفاده نماییم.هر آیتم لیست شامل یک توضیح با عنوان و متن میباشد.ساختار کلی را شما میتوانید در زیر مشاهده نمایید.

<div class="slideshow" id="slideshow">
	<ol class="slides">
		<li class="current">
			<div class="description">
				<h2>عنوان</h2>
				<p>توضیحات</p>
			</div>
			<div class="tiltview col">
				<a href="http://grovemade.com/"><img src="img/1_screen.jpg"/></a>
				<a href="https://tsovet.com/"><img src="img/2_screen.jpg"/></a>
			</div>
		</li>
		<li>
			<div class="description">
				<!-- ... -->
			</div>
			<div class="tiltview row">
				<!-- ... -->
			</div>
		</li>
		<li>
			<!-- ... -->
		</li>
	</ol>
</div>

 خوب حالا کار را با نوشتن کدهای جاوااسکریپتادامه می دهیم.

ما کار را با مقدار دهی اولیه چند متغییر ادامه می دهیم،مثل دو آرایه که شامل نام کلاس انیمیشن ها که کار کنترل آمدن و رفتن اسلاید ها را بر عهده دارد.انتخاب نوع حرکت بصورت تصادفی هنگام حرکت از اسلایدی به اسلاید دیگر انتخاب میشود. شما میتوانید در زیر بخشی از کد را مشاهده نمایید.

function TiltSlider( el, options ) {
		this.el = el;
    //افکتهای موجود برای انیمیشن ها(نام کلاس انیمیشن) هنگامی که یک عنصر وارد یا خارج میشود
		this.animEffectsOut = ['moveUpOut','moveDownOut','slideUpOut','slideDownOut','slideLeftOut','slideRightOut'];
		this.animEffectsIn = ['moveUpIn','moveDownIn','slideUpIn','slideDownIn','slideLeftIn','slideRightIn'];
		// آیتم ها
		this.items = this.el.querySelector( 'ol.slides' ).children;
		// تمام آیتم ها
		this.itemsCount = this.items.length;
		if( !this.itemsCount ) return;
    //ایندکس آیتم فعلی
		this.current = 0;
		this.options = extend( {}, this.options );
		extend( this.options, options );
		this._init();
	}

برای حرکت بین هر اسلاید ما از یک span برای هر اسلاید استفاده کردیم که با کلیک بر روی آن،بر هر اسلاید اعمال خواهد شد.تعداد spanها بستگی به تعداد  اسلایدهای ما دارد.

  //DOMاضافه کردن پیمایش به 
	TiltSlider.prototype._addNavigation = function() {
		// add nav "dots"
		this.nav = document.createElement( 'nav' )
		var inner = '';
		for( var i = 0; i < this.itemsCount; ++i ) {
			inner += i === 0 ? '<span class="current"></span>' : '<span></span>';
		}
		this.nav.innerHTML = inner;
		this.el.appendChild( this.nav );
		this.navDots = [].slice.call( this.nav.children );
	}

 سپس ما باید به هر span رویداد onclick را اعمال کنیم که ما این کار را در زیر انجام داده ایم

	TiltSlider.prototype._initEvents = function() {
		var self = this;
    //"dots"نمایش آیتم جدید هنگام کلیک کردن بر روی پیمایش 
		this.navDots.forEach( function( dot, idx ) {
			dot.addEventListener( 'click', function() {
				if( idx !== self.current ) {
					self._showItem( idx );
				}
			} );
		} );
	}

 ما باید کارهای را روی آیتم فعلی و آیتم بعدی که قرار است نمایش داده بشود انجام بدهیم.ما از هر دو آیتک کلاس هایی را حذف و اضافه خواهیم کرد تا بتوانیم انیمیشن های مورد نیاز را به آنها اضافه نماییم.انیمیشن های ما بصورت تصادفی از animEffectsOut و آرایه animEffectsIn  برداشته میشوند.

	TiltSlider.prototype._showItem = function( pos ) {
		if( this.isAnimating ) {
			return false;
		}
		this.isAnimating = true;

		classie.removeClass( this.navDots[ this.current ], 'current' );

		var self = this,
			//آیتم فعلی
			currentItem = this.items[ this.current ];

		this.current = pos;

		// آیتم بعدی برای نمایش داده شدن
		var nextItem = this.items[ this.current ],
			// انتخاب افکت تصادفی برای نمایش آیتم ها
			outEffect = this.animEffectsOut[ Math.floor( Math.random() * this.animEffectsOut.length ) ],
			inEffect = this.animEffectsIn[ Math.floor( Math.random() * this.animEffectsOut.length ) ];

		currentItem.setAttribute( 'data-effect-out', outEffect );
		nextItem.setAttribute( 'data-effect-in', inEffect );

		classie.addClass( this.navDots[ this.current ], 'current' );

		var cntAnims = 0,
			// تعداد عناصری که در داخل آیتم فعلی به نمایش درخواهند آمد(بصورت انیمیشن
			animElemsCurrentCount = currentItem.querySelector( '.tiltview' ).children.length, 
      //تعداد عناصری که در داخل آیتم بعدی به نمایش درخواهند آمد(بصورت انیمیشن
			animElemsNextCount = nextItem.querySelector( '.tiltview' ).children.length,
      //نگه داشتن تعداد انیمیشن هاپپ که به پایان رسیده اند
			animEndCurrentCnt = 0, animEndNextCnt = 0,
      //تابعی برای بررسی پایان هر انیمیشن
			isFinished = function() {
				++cntAnims;
				if( cntAnims === 2 ) {
					self.isAnimating = false;
				}
			},
      //تابعی برای پایان انیمیشن آیتم فعلی
			onEndAnimationCurrentItem = function() {
				++animEndCurrentCnt;
				var endFn = function() {
					classie.removeClass( currentItem, 'hide' );
					classie.removeClass( currentItem, 'current' );
					isFinished();
				};
					
				if( !isSupported ) {
					endFn();
				}
				else if( animEndCurrentCnt === animElemsCurrentCount ) {
					currentItem.removeEventListener( animEndEventName, onEndAnimationCurrentItem );
					endFn();
				}
			},
      //تابعی برای پایان دادن به انیمیشن آیتم بعدی
			onEndAnimationNextItem = function() {
				++animEndNextCnt;
				var endFn = function() {
					classie.removeClass( nextItem, 'show' );
					classie.addClass( nextItem, 'current' );
					isFinished();
				};

				if( !isSupported ) {
					endFn();
				}
				else if( animEndNextCnt === animElemsNextCount ) {
					nextItem.removeEventListener( animEndEventName, onEndAnimationNextItem );
					endFn();
				}
			};

		classie.addClass( currentItem, 'hide' );
		classie.addClass( nextItem, 'show' );

  ما در آخر آموزش نیز بخشی از  استایل ها را بریتان قرار می دهیم ولی چون این کدها ساده هستند ما توضیحی برای شما ارائه نمی دهیم.

.slideshow {
	position: relative;
	margin-bottom: 100px;

}

.slides {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
	height: 500px;
	width: 100%;
	overflow: hidden;
	background: #ddd;
	color: #333;
}
------------------------------------
/* Show/Hide */
.slides > li.current,
.slides > li.show {
	visibility: visible;
}
------------------------------------
/*بازگشت به قبل از جابجایی سه بعدی و اعمال حالت ۳بعدی*/
.no-csstransformspreserve3d .show .tiltview a,
.no-csstransformspreserve3d .hide .tiltview a,
.no-csstransforms3d .show .tiltview a,
.no-csstransforms3d .hide .tiltview a {
	-webkit-animation: none !important;
	animation: none !important;
}

.no-csstransforms3d .tiltview.col {
	top: -50%;
}

.no-csstransforms3d .tiltview.row {
	top: 20px;
}

/* برخی از پرس و جو های  رسانه ای*/
@media screen and (max-width: 65.3125em) {
	.description,
	.tiltview {
		width: 100%;
	}

	.tiltview {
		left: 0;
		opacity: 0.3;
		pointer-events: none;
	}
}

@media screen and (max-width: 33.75em) {
	.description {
		font-size: 1.1em;
	}

	.slideshow > nav span {
		width: 20px;
		height: 40px;
		margin: 0 10px;
	}
}

@media screen and (max-width: 24em) {
	.slides {
		height: 320px;
	}

	.description {
		font-size: 1em;
		padding: 1.4em;
	}

	.no-csstransforms3d .tiltview.col,
	.no-csstransforms3d .tiltview.row {
		top: 0;
	}
}

شما میتوانید کدهای مربوط به استایل ها را بصورت کامل در داخل فایل دانلود مشاهده فرمایید.

+6
-3


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


8 + یک =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>