Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

محتوای داینامیک - نمایش محتوا به صورت اسلایدی


محتوای داینامیک - نمایش محتوا به صورت اسلایدی


<head>
<script  type="text/javascript"  src="contentslider.js"></script>
<link  href="contentslider.css" rel="stylesheet"  type="text/css">
</head>

<body>
<!--  =================== نمونه  1 ====================  --> 
<div align="center"> 

<div id="slider1" class="sliderwrapper">
<div  class="contentdiv">
محتوای شماره 1
<p></p><a  href="javascript:featuredcontentslider.jumpTo('slider1',  3)">Go to 3rd slide</a></p>
</div>

<div class="contentdiv">
محتوای شماره 2 
</div>

<div class="contentdiv">
محتوای شماره 3 
</div>

</div>
<div id="paginate-slider1"  class="pagination">

</div>
<script type="text/javascript">

featuredcontentslider.init({
id: "slider1",  //id of main slider DIV
contentsource: ["inline",  ""], //Valid values: ["inline", ""] or ["ajax",  "path_to_file"]
toc: "#increment", //Valid  values: "#increment", "markup", ["label1", "label2",  etc]
nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to  hide.
revealtype: "click",  //Behavior of pagination links to reveal the slides:  "click" or "mouseover"
enablefade: [true,  0.2], //[true/false, fadedegree]
autorotate: [true, 3000],  //[true/false, pausetime]
onChange:  function(previndex, curindex){ //event handler fired  whenever script changes slide
//previndex holds  index of last slide viewed b4 current (1=1st slide,  2nd=2nd etc)
//curindex holds index of currently  shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>
<!--  ---------------------------------- انتهای کد نمونه 1  ------------------------------ -->

<!--  =================== نمونه  2 ====================  -->

<div id="slider2" class="sliderwrapper">

<div class="contentdiv">
محتوای شماره 1 
</div>

<div class="contentdiv">
محتوای شماره 2 <br />
<p></p><a  href="javascript:featuredcontentslider.jumpTo('slider2',  1)">Go back to 1st slide</a></p>
</div>

<div class="contentdiv">
محتوای شماره 3 
</div
>

</div>

<div id="paginate-slider2" class="pagination">

<a href="#" class="toc">page 1</a> <a  href="#" class="toc anotherclass">page 2</a> <a  href="#" class="toc">page 3</a> <a href="#"  class="prev" style="margin-left:  10px"><strong><</strong></a> <a href="#"  class="next"><strong>></strong></a></div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider2", //id  of main slider DIV
contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax",  "path_to_file"]
toc: "markup", //Valid values:  "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to  hide.
revealtype: "click",  //Behavior of pagination links to reveal the slides:  "click" or "mouseover"
enablefade: [true,  0.2], //[true/false, fadedegree]
autorotate: [false, 3000],  //[true/false, pausetime]
onChange:  function(previndex, curindex){ //event handler fired  whenever script changes slide
//previndex holds  index of last slide viewed b4 current (1=1st slide,  2nd=2nd etc)
//curindex holds index of currently  shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div> 
</body>

راهنمای استفاده راهنمای استفاده

محتوای داینامیک یا نمایش به صورت اسلایدی امروزه کاربردهای زیادی در  صفحات وی دارد و در قسمت های مختلف سایت از این ابزار مناسب و کاربردی  استفاده می شود. در اینجا اسکریپت نسبتا" ساده ای از محتوای داینامیک را  آورده ایم. این کد سه فایل ضمیمه دارد که می بایست ابتدا آنها را دانلود  نمایید. این سه فایل عبارتند از یک فایل js, یک فایل CSS و آیکن لودینگ  (Loading). مطابق کد نمونه در قسمت head فایل های CSS و js را فرا خوانی  نمایید. کد نمونه 1 یا 2 (کد پیشنهادی: نمونه 2) را کپی و در بخش مورد نظر  از صفحه قرار دهید. با استفاده از فایل CSS ساختار گرافیکی را مطابق سلیقه  خود می توانید اصلاح نمایید. با استفاده از قسمت هایی که در کد به صورت  پررنگ نمایش داده شده است سرعت تغییر فریم و افکت و تنظیمات کنترلی را می  توانید تغییر دهید. در صورت افزایش تعداد فریم ها، بخشی از کد را که با رنگ  آبی مشخص شده به تعداد دلخواه اضافه نمایید، با افزایش هر فریم شماره  مربوطه به صورت خودکار اضافه می شود. به جای محتوای شماره 1، 2 و 3 محتوای  مورد نظر خود را جایگزین نمایید. تگ <a> که با رنگ قرمز مشخص شده است یک  لینک میانبر به فریم مورد نظر شما می باشد. در فایل js آدرس آیکن لودینگ را  در صورت نیاز اصلاح نمایید.
توجه: هر دو نمونه 1 و 2  یکسان بوده و تنها در چیدمان و شکل لینک های کنترلی تفاوت دارند.
در  اسکریپت نمونه 2 به جای لینک متنی، از تصویر نیز می توانید استفاده نمایید.  (بخش سبز رنگ)

» دانلود فایل ضمیمه:  DynamicContent.zip

 

khaste nabashid.agha mohamad man motevajeh nashodam
پاسخ : چی بگم؟
ولش کن زیاد بهش فکر نکن.

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36632
افراد آنلاین : 1
بازدید امروز : 244
بازدید دیروز : 1,174
گوگل امروز : 13
گوگل دیروز : 116
بازدید هفته : 5,790
بازدید ماه : 27,025
بازدید سال : 412,648
بازدید کلی : 10,807,124