Cлайдер картинок (Deff)
В HTML верх
Сам слайдер.
Ставим туда, где нужен слайдер:
Ниже слайдера ставим скрипт
Пояснения
Размеры слайдера определяются картинкой-"накрывашкой"
Считать размеры любой картинки - правой кнопкой мыши по картинке и выбрать в раскрывающемся меню "Свойства изображения"
В нашем коде картинка-"накрывашка" выделена красным =>
Ваши слайд-картинки выделены синим.
Для простановки новых размеров в стиле слайдера под Вашу картинку-"накрывашку" необходимо от реальной ширины и высоты этой картинки отнять двойную ширину бордера.
Определить ширину бордера можно по следующему поясняющему скриншоту:
Т.е бордер чуть уже, дабы картинка заходила внутрь "экрана".
Далее вычисленный бордер проставляем во вторую строку указаний для #Obr {
А отняв двойную ширину бордера от реальной ширины и высоты картинки, проставляем их в строках.
Размеры видимой части картинок будут определяться именно этими параметрами, так что для полного отражения стоит их делать в этот размер.
Итого:
Цитата
<style type="text/css">
#Obr {
background-clip:border-box;
border:transparent solid 34px;
overflow: hidden;
width:444px;
height:192px;
position:relative;
}
div.WRAP {
background-color:#A883AF;
display:inline-block;
}
div.WRAP img.picture_mask{
position:absolute;
margin-left:-3px;
z-index:100;
}
#Obr img.slide{
position:absolute;
display:none;
}
#Obr img.slide:first-child{
display:block;
}
</style>
#Obr {
background-clip:border-box;
border:transparent solid 34px;
overflow: hidden;
width:444px;
height:192px;
position:relative;
}
div.WRAP {
background-color:#A883AF;
display:inline-block;
}
div.WRAP img.picture_mask{
position:absolute;
margin-left:-3px;
z-index:100;
}
#Obr img.slide{
position:absolute;
display:none;
}
#Obr img.slide:first-child{
display:block;
}
</style>
Сам слайдер.
Ставим туда, где нужен слайдер:
Цитата
<div class="WRAP">
<img class='picture_mask' src="http://n.inetech.ru/images/slider.png"/>
<div id="Obr">
<img class='slide' src="http://s1.uploads.ru/i/t4EZ0.png"/>
<img class='slide' src="http://s1.uploads.ru/i/udkzn.png"/>
<img class='slide' src="http://s1.uploads.ru/i/K64eT.png"/>
<img class='slide' src="http://s1.uploads.ru/i/RNnTx.jpg"/>
</div>
</div>
<img class='picture_mask' src="http://n.inetech.ru/images/slider.png"/>
<div id="Obr">
<img class='slide' src="http://s1.uploads.ru/i/t4EZ0.png"/>
<img class='slide' src="http://s1.uploads.ru/i/udkzn.png"/>
<img class='slide' src="http://s1.uploads.ru/i/K64eT.png"/>
<img class='slide' src="http://s1.uploads.ru/i/RNnTx.jpg"/>
</div>
</div>
Ниже слайдера ставим скрипт
Код
<script type="text/javascript">
$(document).ready(function(){
var slideArr=[]
$("#Obr img.slide").each(function(i){ slideArr[i]=$(this);
});
var LengSlide = slideArr.length; var SLTime = 4400;
function Circle(st) { var v = st-1; if(st==LengSlide)st=0; if(st==0)var v=LengSlide-1;i=st; slideArr[v].fadeOut(SLTime-400) slideArr[i].fadeIn(SLTime, function() { setTimeout(function(){$("#Obr img.slide").stop(true,true); st++; Circle(st); },323) });
} Circle(1)
});
</script>
$(document).ready(function(){
var slideArr=[]
$("#Obr img.slide").each(function(i){ slideArr[i]=$(this);
});
var LengSlide = slideArr.length; var SLTime = 4400;
function Circle(st) { var v = st-1; if(st==LengSlide)st=0; if(st==0)var v=LengSlide-1;i=st; slideArr[v].fadeOut(SLTime-400) slideArr[i].fadeIn(SLTime, function() { setTimeout(function(){$("#Obr img.slide").stop(true,true); st++; Circle(st); },323) });
} Circle(1)
});
</script>
Пояснения
Размеры слайдера определяются картинкой-"накрывашкой"
Считать размеры любой картинки - правой кнопкой мыши по картинке и выбрать в раскрывающемся меню "Свойства изображения"
В нашем коде картинка-"накрывашка" выделена красным =>
Цитата
<img class='picture_mask' src="http://n.inetech.ru/images/slider.png"/>
Ваши слайд-картинки выделены синим.
Для простановки новых размеров в стиле слайдера под Вашу картинку-"накрывашку" необходимо от реальной ширины и высоты этой картинки отнять двойную ширину бордера.
Определить ширину бордера можно по следующему поясняющему скриншоту:
Т.е бордер чуть уже, дабы картинка заходила внутрь "экрана".
Далее вычисленный бордер проставляем во вторую строку указаний для #Obr {
Цитата
border:transparent solid 34px;
А отняв двойную ширину бордера от реальной ширины и высоты картинки, проставляем их в строках.
Цитата
width:444px;
height:192px;
height:192px;
Размеры видимой части картинок будут определяться именно этими параметрами, так что для полного отражения стоит их делать в этот размер.
Итого:
Цитата
#Obr {
background-clip:border-box;
border:transparent solid 34px;
overflow: hidden;
width:444px;
height:192px;
position:relative;
}
background-clip:border-box;
border:transparent solid 34px;
overflow: hidden;
width:444px;
height:192px;
position:relative;
}
Просмотров: 607, Загрузок: 0, Оценка: 5.0 (1)
| Страницы: | |