مهمان عزیز خوش آمدید. ورود ثبت نام



امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
آموزش ساخت اسلایدر با html و css3

آموزش ساخت اسلایدر با Html و Css3
سلام به همه ی دوستان. در این آموزش می خوایم به شما یاد بدیم که چطور یک اسلایدر زیبا فقط با استفاده از Html  و Css3  بسازیم. امیدوارم بتونید این اسلایدر رو برای انجمن،سایت و یا حتی برای کلاس گذاشتنSmileدی) بسازید. البته ذکر کنم که این یک مقاله ی ترجمه شده ی آزاد توسط خودم(محمد صبائیان) از Joshua Johnson می باشد و کپی برداری بدون نام بردن مترجم حرام و منع شرعی دارد.

اول ما باید ببینیم می خوایم چی درست کنیم. به این لینک بروید.

خب همونجور که دید ما وقتی روی تصاویر کوچیک بالا موس رو می بریم تصویر بزگ اون پایین ظاهر میشه. یعنی دقیقا این تصویر زیر:
تصویر: http://article.persiancg.ir/msabaeian/css3slider/show.jpg

خب حالا باید تصاویرمون رو انتخاب کنیم توجه داشته باشید که باید از هر تصویر یه اندازه 200 در 200 پیکسل و یک اندازه 920 در 400 پیکس می خوایم. من سایت http://lorempixel.com/ رو معرفی می کنم که می تونید ازش استفاده کنید برای گرفتن عکس های خوب و در اندازه های دلخواه.

تصاویر داخل این آموزش را از این لینک دانلود کنین.

اول بگم ما می خوایم 4 تگ(a) برای لینک دادن درست کنیم که آدرس اون رو # بزاریم و داخل این تگ عکس بزگ و کوچیک رو با class  های مورد نیاز تعریف  کنیم. یعنی این شکلی:
کد:
<a href="#">
    <img class="کلاس عکس های کوچیک" src="آدرس عکس کوچک">
    <img class="کلاس عکس های بزرگ" src="آدرس عکس بزگ">
</a>
پس بیاین شروع کنیم اول یک div درست کنین با هر classکه دوست دارین(اگرم می خواین بهش id بدین) مثلا من گذاشتم slider بعدشم هر 4 تا عکس کوچک و بزرگ رو براشون تعریف کنین. من برای عکس های کوچک class را small و برای عکس های برگ class رو big گذاشتم. اینم بگم ما نیاز دارم که یک عکس اولیه داشته باشیم که اونو نشون بده پس یه عکس هم به اندازه 920 در 400 با class مثلا default می زاریم. اگه درست پیش رفته باشیم تا حالا کل صفحه html ما اینجوری شده.
کد:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Css3 Slider| اسلایدر سی اس اس 3</title>
</head>
<body>
<div class="slider">
<a href="#">
<img src="small1.jpg" class="small">
<img src="big1.jpg" class="big">
</a>
<a href="#">
<img src="small2.jpg" class="small">
<img src="big2.jpg" class="big">
</a>
<a href="#">
<img src="small3.jpg" class="small">
<img src="big3.jpg" class="big">
</a>
<a href="#">
<img src="small4.jpg" class="small">
<img src="big4.jpg" class="big">
</a>
<a href="#">
<img src="hover.jpg" class="hover big" width="920" >
</a>
</div>
</body>
</html>

 حالا بیاین شروع کنیم به دادن css های مورد نیاز. اول به کل div یکم حالت میدیم.
کد:
.slider {
  position: relative;
  height: 660px;
  width: 960px;
  overflow: hidden;
  margin: 0 auto;
}
اگر کار هرکدوم از کد های بالا رو نمی دونین هزینه اش یه سرچ تو گوگله.

 بیاین یه تگ های a خودمون بگیم که به چپ بچسبن و یکم از هم فاصله داشته باشن پس:
کد:
a {
  float: left;
  margin: 20px;
}

خب اینجا به عکس های کوچیک خودمون وقتی روشون می ریم یکم سایه و زیبایی بدیم پس بنویسید:
کد:
a:hover .small {
  -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
 
تا اینجا 70 درصد راه رو رفتیم بیاین به عکس های بزرگمون هم حالت های مورد نیازشون رو بدیم تا کاری رو که می خوایم انجام بدن:
کد:
.big {
  position: absolute;
  top: 900px;
  left: 20px;
  -webkit-transition: top 1s ease;
  -moz-transition: top 1s ease;
  -o-transition: top 1s ease;
  -ms-transition: top 1s ease;
  transition: top 1s ease;
}

تا حالا همه کارو تقریبا کردیم فقط مونده بگیم وقتی موس رو بردیم رو ی عکس های کوچیک عکس های بزرگ بیان بالا:
کد:
a:hover .big {
  top: 260px;
}

تموم شد دیگه فقط به عکس اولیه مون بگیم یکم بره عقب تر که اونا بتونن بیان و یکم مکانشو درست کنیم:
کد:
.hover {
  top: 260px;
  left: 20px;
  z-index: -3;
}

بالاخره تموم شد حالا اسلایدر خودتونو ببنید و لذت ببرید و اگه می خواین یه بکگراند هم براش بزارین.
دوستان اگر غلط املایی داشت به بزرگی خودتون ببخشید.
منتظر آموزش های بعدی هم باشید.
مهم: لایک فراموش نشه لطفاBig Grin


به مدیر ، پاسخگو و عضو فعال نیازمندیم....

در زمینه های مختلف

هم اکنون ثبت نام کنید

ایرانیان وب
پاسخ
این کدهارو باید به کجا اضافه کنیم ؟؟؟
بعدشم اینارو چجوری باید سرهم کنیم ؟؟
یکی یکی باید تو نات پد کپیش کنیم تا یه کد بشه ؟؟؟
یا هرکدوم جای مخصوص خودشو داره ؟؟؟
توضیحات اصلا خوب نبود.Undecided


پاسخ
توضیحات کاملا مشخصه(تازه من از مقاله فراتر هم رفتم)

این کد ها
کد:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Css3 Slider| اسلایدر سی اس اس 3</title>
</head>
<body>
<div class="slider">
<a href="#">
<img src="small1.jpg" class="small">
<img src="big1.jpg" class="big">
</a>
<a href="#">
<img src="small2.jpg" class="small">
<img src="big2.jpg" class="big">
</a>
<a href="#">
<img src="small3.jpg" class="small">
<img src="big3.jpg" class="big">
</a>
<a href="#">
<img src="small4.jpg" class="small">
<img src="big4.jpg" class="big">
</a>
<a href="#">
<img src="hover.jpg" class="hover big" width="920" >
</a>
</div>
</body>
</html>
کد های HTML هستن
و بقیه شون CSS هستن


به مدیر ، پاسخگو و عضو فعال نیازمندیم....

در زمینه های مختلف

هم اکنون ثبت نام کنید

ایرانیان وب
پاسخ


پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir