محتوای داینامیک - نمایش محتوا به صورت اسلایدی
<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
ولش کن زیاد بهش فکر نکن.