IgorArhangel,
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
#Wrap {
width:480px;
position:relative;
text:align:center;
}
#SlideWrp{
display:inline-block;
}
#Prev,#Next {
border:red solid 1px;
padding:2px;
cursor:pointer;
}
#Prev {
float:left;
}
#Next {
float:right;
}
div.Slide {
//float:left;
float:right;
height:100px!important;
width:200px;
padding:6px;
border:blue solid 1px;
}
#SlideWrp {
height:114px; //height+border+padding;
overflow-y:hidden; //не расширение до $(".Slide:not('.active')").hide();
width:430px;
}
#indexActive{
float:right;
margin-right:30px;
margin-top:10px;
}
span[id^="active_Ind"]{
cursor:pointer;
float:right;
border:blue solid 2px;
height:6px;
width:6px;
margin:6px;
}
span[id^="active_Ind"].active{
border: red solid 2px;
}
</style>
<div id="Wrap">
<span id="Prev">←</span><span id="Next">→</span>
<div id="SlideWrp">
<div class="Slide active">1</div>
<div class="Slide active">2</div>
<div class="Slide">3</div>
<div class="Slide">4</div>
<div class="Slide">5</div>
</div><br />
<div id="indexActive"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$(".Slide:not('.active')").hide();
var intervalAutoId;
var LsL=$(".Slide").length;
$(".Slide").each(function(i){
$(this).attr('data',i);
$("#indexActive").prepend('<span id="active_Ind_'+i+'"></span>')
});$("#indexActive #active_Ind_0").addClass('active');
function setIndActive(){
var j=$(".Slide.active:first").attr('data');
$("#indexActive span[id^='active_Ind_']").removeClass('active');
$("#indexActive span[id='active_Ind_"+j+"']").addClass('active');
}
$("#Next").click(function(){
UserNoActSlide=false;
$(".Slide:first").removeClass('active').hide('slow',function () {$(this).appendTo("#SlideWrp")});
$(".Slide:eq(2)").addClass('active').show('slow');
setIndActive();
});
$("#Prev").click(function(){
UserNoActSlide=false;
$(".Slide.active:last").removeClass('active').hide('slow');
$(".Slide:last").prependTo("#SlideWrp").addClass('active').show('slow');
setIndActive()
});
$("#indexActive > span[id^='active_Ind']").click(function(){
UserNoActSlide=false;
$("#indexActive span[id^='active_Ind_']").removeClass('active');
$(this).addClass('active');
var Id= '' + $(this).attr('id').substring(11);//alert(Id);
$(".Slide").each(function(i){
if($(this).attr('data')==Id) return false;
$(this).appendTo("#SlideWrp");
});
$(".Slide.active:first").removeClass('active').hide();
$(".Slide:eq(0)").addClass('Preactive').show('slow');
$(".Slide.active:last").removeClass('active').hide();
$(".Slide:eq(1)").show('slow').addClass('active');
$(".Slide:eq(0)").show('slow').toggleClass('Preactive,active');
});
// АВТОПРОКРУТКА
var UserNoActSlide=true;
$("#Wrap").bind('mouseenter mousemove',function(){ //Cброс автозапуска по наведению
UserNoActSlide=false;//alert("A")
clearInterval(intervalAutoId);
UserNoActSlide=false;
}).mouseleave(function(){ //Разрешаем автозапуск по сходу курсора
clearInterval(intervalAutoId);
UserNoActSlide=true;
});
setInterval(function(){ //Периодический тест активности и автозапуск
if(UserNoActSlide){
intervalAutoId=setInterval(function(){
UserNoActSlide=false;
$("#Next").click();
},3000); // Интервал автопрокрутки
}
},10000); // Интервал Теста;
});
</script>
|
Сообщение от IgorArhangel
|
и еще интересно если разместить в background
картинки.. они большие в ширину 700 пикселей.
|
1. Сделайте скриншот текущего слайдера и врисуйте туда картинки
2. Укажите нужные высоту и ширину картинок( пока только ширина)
|
Сообщение от IgorArhangel
|
|
С помощью какой функции можно сделать чтоб ширина слайдера была 1000 пх, а отображалась одна картинка по центре а две которые по бокам на половину?
|
Тож самое = скриншот - эскиз (И тут седни еще пару вещей обещал
