رفتن به مطلب

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


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

سلام

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

slideshow.zip

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

سلام

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

سلام

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

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

slideshow.zip

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

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

  • امتیاز 2
لینک به ارسال

شما کافیه داخل 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 داره. طول عکس رو اینجا باید وارد کنید.


$(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 سال بعد...

لطفا برای ارسال دیدگاه وارد شوید

شما بعد از اینکه وارد حساب کاربری خود شدید می توانید دیدگاهی ارسال کنید



ورود به حساب کاربری
×
×
  • اضافه کردن...