رفتن به مطلب

درخواست جی کوئری اسلایدر لوگو


پست های پیشنهاد شده

سلام

داداش یه فایل برات پیوست کردم. این یه اسلایدر ساده هست. که هم دکمه داره و هم اتوماتیک اسکرول می کنه. منتها تو هر اسلاید یه عکس داره. با یه کمی تغییر تو اندازه هاش می تونی اون چیزی که می خوای ازش در بیاری.

slideshow.zip

لینک به ارسال
  • 8 ماه بعد...

سلام

داداش یه فایل برات پیوست کردم. این یه اسلایدر ساده هست. که هم دکمه داره و هم اتوماتیک اسکرول می کنه. منتها تو هر اسلاید یه عکس داره. با یه کمی تغییر تو اندازه هاش می تونی اون چیزی که می خوای ازش در بیاری.

سلام

از کدتون اسفاده کردم ، ولی : منتها تو هر اسلاید یه عکس داره...

الان من این رو ساختنم منتهی ریخت بهم :

slideshow.zip

ویرایش شده توسط honda.moji
لینک به ارسال

شما کافیه داخل li هر چی دوست دارید بزارید. چه عکس باشه، چه متن و چه ترکیبی از هر دو.

لینک به ارسال

شما کافیه داخل li هر چی دوست دارید بزارید. چه عکس باشه، چه متن و چه ترکیبی از هر دو.

من فقط طول و عرض اسلایدر رو عوض کردم + تعویض باتوم ها ! الان ریخته بهم میشه یه نگاه به فایل زیپ بندازید ؟

اینم استایل :


*{
margin:0;
padding: 0;
background:#372b2a;
}
#container{
position: relative;
margin:auto;
background:url(../../../../xampp/htdocs/wordpress/wp-content/themes/blog/images/bg.jpg);
width:auto;
height:auto;
border-bottom: 1.5px dashed #CCC;
border-top: 1.5px dashed #CCC;
box-shadow:0 4px 6px 2px #2d2322;

}
#slideshow{
position: relative;
margin: auto;
width: 800px;
height: 200px;
padding-top:0px;
}
#slideshow #images{
position: relative;
overflow-x: scroll;
overflow-y: hidden;
}
#images ul{
width: 3000px;
list-style: none;
}
#images li{
float: left;
}
#slideshow a{
position: absolute;
z-index: 10;
width: 30px;
height: 200px;
float: left;
display: none;
}
#slideshow .left{
background-image: url('images/nav-left.png');
margin-left:0px;
}
#slideshow .right{
background-image: url('images/nav-right.png');
right: 0px;
}

لینک به ارسال

از داخل script.js یه 750 داره. طول عکس رو اینجا باید وارد کنید.

لینک به ارسال

از داخل script.js یه 750 داره. طول عکس رو اینجا باید وارد کنید.


$(function(){
var i = 0;

$('#images').css('overflow-x' , 'hidden');
$('#images').scrollLeft(0);
$('#slideshow a').css('display' , 'block');
$('#slideshow a').css('opacity' , '0.0');

window.setInterval(function(){
if(i>=3)
i = -1;
i++;
$('#images').animate({scrollLeft: i*750},500);
}, 5000);

$('#slideshow').mouseenter(function(){
$('#slideshow a').animate({opacity: 1.0}, 300);
});

$('#slideshow').mouseleave(function(){
$('#slideshow a').animate({opacity: 0.0}, 300);
});

$('#slideshow .right').click(function(){
window.clearInterval();
if(i>=3)
i = -1;
i++;
$('#images').animate({scrollLeft: i*750},500);
});

$('#slideshow .left').click(function(){
window.clearInterval();
if(i <= 0)
i = 4;
i--;
$('#images').animate({scrollLeft: i*750},500);
});

});

لینک به ارسال
  • 3 سال بعد...

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...