درج اسلايدر

[sebastian]

خوب اول کدهای html رو در قسمتی که میخوای اسلایدر نمایش داده بشه قرار بدید

<div id="slideshowContainer"><div class="slideshow">        <img src="images/image1.png" alt="" width="600" height="300" />        <img src="images/image2.png" alt="" width="600" height="300" />        <img src="images/image3.png" alt="" width="600" height="300" />        <img src="images/image4.png" alt="" width="600" height="300" />        <img src="images/image5.png" alt="" width="600" height="300" /></div></div>

بعد این کد ها رو در قسمت Head سایتت قرار بده

<!-- include jQuery library --><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script><!-- include Cycle plugin --><script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script><script type="text/javascript">    $(document).ready(function() {        $('.slideshow').cycle({        fx: 'fade',        pause: 1,        prev: '#prev',        next: '#next'        });    });</script>

این هم استایل اسلایدر که به سلیقه ی خودتون هم میتونید بنویسیدش که به جای تصویر background میتونید تصویر زمینه ی اسلایدر خودتون رو جایرگزین کنید

<style type="text/css">* {    margin:0px;    padding:0px;    border:0px;}body {    background:url(images/background.jpg) repeat-x;}#slideshowContainer {    width: 632px;    margin: 100px auto 0 auto;    position:relative;}.slideshow {    height: 332px;}.slideshow img {    padding: 15px;    border: 1px solid #ccc;    background-color: #eee;}#nav {    list-style-type:none;    z-index:150;}#nav li a {    display:block;    width:58px;    height:102px;    text-indent:-9999px;    outline:none;}#prev a {    background:url(images/left.png);    width:58px;    height:102px;    position:absolute;    top:120px;    left:-70px;}#next a {    background:url(images/right.png);    width:58px;    height:102px;    position:absolute;    top:120px;    right:-70px;}#next a:hover {    background:url(images/right_over.png);}#prev a:hover {    background:url(images/left_over.png);}</style>

البته برای هر سیستم مدیریت محتوا افزونه هایی وجود داره که این امکانات اسلایدر ها رو به راحتی فقط با یک نصب در اختیارتون میزاره