در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

قسمت اول : ساخت اسلایدر با کنترل پنل PHP

بنام خدا ، آموزش ساخت اسلایدر شیک با پنل PHP

قسمت اول ساخت اسلایدر

ابتدا ساخت اسلایدر را به شما آموزش می دهیم و سپس در بخش بعد پنل آپلود عکس برای اسلاید می سازیم ، ایتدا یک فایل HTML می سازیم به صورت زیر

<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>SlideShow</title>
</head>
<body>
</body>
</html>

خوب ما دو فایل لازم داریم که باید ان ها را دانلود و به فایل HTML پیوست کنیم ، برای دانلود دوفایل روی لینک زیر کلیک کنید

دانلود دوفایل Jquery

رمز فایل : tosinso.com دو فایل را دانلود می کنیم و در کنار فایل HTML در یک پوشه به نام js ذخیره می کنیم

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SlideShow</title>
<script src="js/jquery.js"></script>
<script src="js/cycle.js"></script>
</head>
<body>
</body>
</html>

خوب حالا div ایجاد می کنیم در قسمت body برای ایجاد اسلایدر و قرار دادن عکس ها در آن

<div id="all">
<div id="slideshow">
<img src="img/01.jpg">
<img src="img/02.jpg">
<img src="img/03.jpg">
</div>
<div id="next"><img src="img/next.png" width="35" height="35"></div>
<div id="prev"><img src="img/prev.png" width="35" height="35"></div>
</div>

DIV اول را برای چهارچوب اسلایدر قرار دادیم و به ان یک ID به نام all می دهیم .DIV بعدی برای قسمت عکس های است که قرار نمایش داده شود که به آن ایدی slideshow می دهیم .داخل div که آیدی slideshow دارد با استفاده از تگ img عکس های اسلایدر را لود می کنیم.دو DIV بعدی برای دکمه بعدی و قبلی است که به ترتیب ID next و prev به ان داده ایم .داخل div که آیدی next دارد با استفاده از تگ img عکس بعدی را لود می کنیم.داخل div که آیدی prev دارد با استفاده از تگ img عکس قبلی را لود می کنیم. در نهایت فایل HTML ما به صورت زیر در می آید

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SlideShow</title>
<script src="js/jquery.js"></script>
<script src="js/cycle.js"></script>
</head>
<body>
<div id="all">
<div id="slideshow">
<img src="img/01.jpg">
<img src="img/02.jpg">
<img src="img/03.jpg">
</div>
<div id="next"><img src="img/next.png" width="35" height="35"></div>
<div id="prev"><img src="img/prev.png" width="35" height="35"></div>
</div>
</body>
</html>

حالا برای عناصر موجود در صفحه HTML شروع به CSS نویسی می کنیم،ابتدا یک فایل CSS می سازیم و در کنار فایل HTML در پوشه CSS ذخیره می کنیم و با دستور زیر فایل HTML را به فایل CSS متصل می کنیم

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

و در آن کد های زیر را به ترتیب می نوسیم. این قسمت که با #all مشخص شده ویژگی های div اولی است

#all
{
	width:750px;
	height:600px;
	background:#F30;
	position:absolute;
	right:0;
	left:0;
	margin:0 auto;
}

این قسمت که با # slideshow مشخص شده ویژگی های div دومی است

#slideshow
{
	width:720px;
	height:570px;
	background:#CF0;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto auto;
}

این قسمت که با # next مشخص شده ویژگی های div سوم است

#next
{
	position:absolute;
	right:20px;
	top:250px;
	z-index:20;
}

این قسمت که با# prev مشخص شده ویژگی های div چهارم است

#prev
{
	position:absolute;
	left:20px;
	top:250px;
	z-index:20;
}

این قسمت برای ویژگی عکس های موجود در اسلایدر است

#slideshow img
{
	width:100%;
	height:100%;
}

خوب تا الان فایل css آماده است و به فایل HTML متصل شده است ، تا این مرحله محتوای فایل HTML به صورت زیر است

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>SlideShow</title>
<script src="js/jquery.js"></script>
<script src="js/cycle.js"></script>
</head>
<body>
<div id="all">
<div id="slideshow">
<img src="img/01.jpg">
<img src="img/02.jpg">
<img src="img/03.jpg">
</div>
<div id="next"><img src="img/next.png" width="35" height="35"></div>
<div id="prev"><img src="img/prev.png" width="35" height="35"></div>
</div>
</body>
</html>

محتوای فایل CSS به صورت زیر می باشد

#all
{
	width:750px;
	height:600px;
	background:#F30;
	position:absolute;
	right:0;
	left:0;
	margin:0 auto;
}
#slideshow
{
	width:720px;
	height:570px;
	background:#CF0;
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	margin:auto auto;
}
#next
{
	position:absolute;
	right:20px;
	top:250px;
	z-index:20;
}
#prev
{
	position:absolute;
	left:20px;
	top:250px;
	z-index:20;
}
#slideshow img
{
	width:100%;
	height:100%;
}

خوب فقط یک تکه کد ساده هست تا دکمه ها هم فعال شوند

<script>
$("#slideshow").cycle({
	next:"#next",
	prev:"#prev"
	
	});
</script>

خوب عکس ها و دکمه ها رو در پوشه img در کنار فایل HTML قرار می دهیم و فایل HTML را اجرا می کنیم امیدوارم تا اینجا موفید واقع شده باشه،شما می تونید این پروژ را از لینک زیر دانلود کنید

دانلود سورس پروژه

رمزفایل : tosinso.com

نویسنده : محمد جواد صبری

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی است

#نوشتن_slider_با_jquery #اسلایدر_صفحات_وب #معرفی_اسلایدر_تمام_صفحه #ساخت_اسلایدر_در_php #slider_صفحات_وب #slider_تمام_صفحه_در_css #نوشتن_slider_در_php #معرفی_slider_تمام_صفحه #نوشتن_کد_slider_در_php
2 نظر
فرشته سلیمانی

سلام خسته نباشید این کددستوری که گفتید نیاز به نرم افزارخاصی داره یا تو نوت پد هم مثل اچ تی ام ال میشه اجراش کرد؟

محمد جواد صبری

سلام

متشکرم

بله در نوت پد می تونید بنویسید و مثل HTML هم اجرا می شود

شما می تونید از قسمت پایانی مطلب روی دانلود سورس پروژ کلیک کنید و سورس پروژ را دانلود کنید

با احترام صبری

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....