Smiley face

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

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
برچسب هاي مطلب :



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

فرم ثبت نظر

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