Smiley face

Google

در فروشگاه اينترنتي داتيس   در كل اينترنت

تقويم و مناسبتها

رهگيري مرسولات پستي

كاربرگرامي شما مي توانيد پس از دريافت باركد پســتي از طريق دكمه رهگيري سفارشـات ، بوسيله دكمه رهگيري مرسوله پستي ، مرسـوله خود را از طريق وب سايت اداره پســت رديابي نماييد.

Datissoftware

Datissoftware

نماد ها

logo-samandehi

عناوين علمي و آموزشي

مطالب جديد

نرم افزارهاي مورد نياز

IDM دانلود Internet Download Manager
Chrome دانلود Google Chrome
Firefox دانلود Mozilla Firefox
Winrar دانلود Winrar
FlashPlayer دانلود Flash Player
Adobe Reader دانلود Adobe Reader
Mp4 Codec دانلود Mp4 Codec

آمار و اطلاعات

جهت عضــويت در خبرنامه فروشــگاه اينترنتي داتيــس ايميل صحيح خود را وارد نماييد.

عنوان : ايجاد نوار لغزنده تصویر با جی کوئری

1396/12/14 - 14:14:32
Jquery image slider / jcarousel


ايجاد نوار لغزنده تصویر با جی کوئری

این كد برای ايجاد نوار لغزنده تصویر برای صفحه وب شما است. ما از jCarousel استفاده می کنیم که یک پلاگین جی کوئری برای کنترل یک لیست از اقلام در جهت افقی یا عمودی است. آیتم هایی که می توانند محتوای HTML استاتیک باشند و یا با AJAX (یا بدون آن) بارگیری شوند، می توانند به عقب و جلو (با یا بدون انیمیشن) کشیده شوند. فقط کدهای زیر را کپی کنید و آنها را وارد کنید.

 

:Javascript Part

<script src='http://mistonline.in/jquery/jquery_new.js' type='text/javascript'></script>

<script src='http://mistonline.in/jquery/jquery.jcarousel.pack.js' type='text/javascript'></script>

<script src='http://mistonline.in/jquery/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>

 

<script type="text/javascript">

jQuery(document).ready(function() {

jQuery('#mycarousel').jcarousel({

wrap:"both",

scroll:2,

animation:"slow"

});

function mycarousel_initCallback(carousel) {

jQuery('#featured-next-button').bind('click', function() {

carousel.next();

return false;

});

 

jQuery('#featured-prev-button').bind('click', function() {

carousel.prev();

return false;

});

jQuery('.button-nav span').bind('click', function() {

carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));

return false;

});

};

jQuery('#feature-carousel').jcarousel({

wrap:"both",

scroll:1,

auto:10,

initCallback: mycarousel_initCallback,

buttonNextHTML: null,

buttonPrevHTML: null

});

 

});

</script>

 

CSS part

 

<style type="text/css">

.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}

 

.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}

 

.jcarousel-skin-tango .jcarousel-clip-horizontal {width941px;height: 254px;}

.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}

.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}

.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}

 

.jcarousel-skin-tango .jcarousel-next-horizontal {

background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;

cursor:pointer;

height:254px;

right:20px;

position:absolute;

top:0;

width:46px;

}

 

.jcarousel-skin-tango .jcarousel-prev-horizontal {

background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;

cursor:pointer;

height:254px;

left:20px;

position:absolute;

top:0;

width:46px;

}

 

.jcarousel-container {position: relative;}

.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}

.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}

.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}

.jcarousel-next {z-index: 3;display: none;}

.jcarousel-prev {z-index: 3;display: none;}

 

#news-slider{background-color:#FFFFFF;padding:20px 0;}

#news-slider img{border:none;height:254px;width:307px;}

</style>

 

The main HTML part

<div id='news-slider'>

<ul class='jcarousel-skin-tango' id='mycarousel'>

<li><a href='#'><img src='http://mistonline.in/jquery/image1.jpg'/></a></li>

<li><a href='#'><img src='http://mistonline.in/jquery/image2.jpg'/></a></li>

<li><a href='#'><img src='http://mistonline.in/jquery/image3.jpg'/></a></li>

<li><a href='#'><img src='http://mistonline.in/jquery/image4.jpg'/></a></li>

<li><a href='#'><img src='http://mistonline.in/jquery/image5.jpg'/></a></li>

<li><a href='#'><img src='http://mistonline.in/jquery/image6.jpg'/></a></li>

</ul>

</div>

نمايش دمو

1396/12/14 - 14:14:32
برچسب هاي مطلب :



شما اولين نفري باشيد كه نظر ارسال مي كند.

فرم ثبت نظر

نام و نام خانوادگی
ایمیل
وبلاگ
نظر و کامنت
كد امنيتي