Добрый день! Я поставил скрипт карусель картинок, но есть проблемка,...стрелки далеко от карусели и не ровно стоят (слева ниже,..справа выше).Нельзя их подвинуть ближе к карусели? И ещё,..подвожу курсор и карусель начинает крутиться, или так должно быть? А нельзя сделать по нажатию на стрелку карусель вращалась бы. Не понятно как скорость минимальную сделать(((...очень много скобок, пробовал,..не получается.Не увеличивается картинка при на её наведение,..вместо увеличинной картинки показывает надпись( альтернативный текст). Расстояние между фото тоже не сосем понятно как отрегулировать.Посмотрите скрипт, какой я поставил,..может поправите или подскажите, где точно регулировать...
Скрыть/открыть
<!--Скрипт Карусель/Галерея картинок-->
<style type="text/css">
.block-img{
position: relative;
display:inline;
}
.expando{
position: relative;
vertical-align: middle;
border: 0;
text-align: center;
margin-right:-5px;
}
#prev{float:left;height:31px;margin-top:7px;}
#next{float:right;height:31px;margin-top:7px;}
#d0,#d1,#d2,#d3,#d4{
position: absolute;
bottom:40px;
}
#d5,#d6,#d7,#d8{
position: absolute;
bottom:40px;
margin-right:-44px;
right:50%;
}
</style>
<!--Увеличиваем картинки в галерее-->
<script type="text/javascript">
if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};
expConIm.ims = {};
})();
}
</script>
<!--Блок куда ставятся и увеличиваются картинки-->
<center>
<span id="prev" onmouseover="inc()" onmouseout="inc1()"><img src="http://www.sdws.ru/pictures/prev.png" style="cursor:pointer" width="10" height="13" ></span>
<div class="block-img">
<span id="d0"></span>
<span id="id0" class="expando" onmouseover = "d0.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d0.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d1"></span>
<span id="id1" class="expando" onmouseover = "d1.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d1.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d2"></span>
<span id="id2" class="expando" onmouseover = "d2.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d2.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d3"></span>
<span id="id3" class="expando" onmouseover = "d3.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d3.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d4"></span>
<span id="id4" class="expando" onmouseover = "d4.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d4.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d5"></span>
<span id="id5" class="expando" onmouseover = "d5.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d5.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d6"></span>
<span id="id6" class="expando" onmouseover = "d6.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d6.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d7"></span>
<span id="id7" class="expando" onmouseover = "d7.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d7.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d8"></span>
<span id="id8" class="expando" onmouseover = "d8.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d8.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d9"></span>
<span id="id9" class="expando" onmouseover = "d9.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d9.innerHTML = ''"></span>
</div>
<div class="block-img">
<span id="d10"></span>
<span id="id10" class="expando" onmouseover = "d10.innerHTML = '<img src='+event.target.src+'>'" onmouseout="d10.innerHTML = ''"></span>
</div>
<span id="next" onmouseover="dec()" onmouseout="dec1()"><img src="http://www.sdws.ru/pictures/next.png" style="cursor:pointer" width="10" height="13"></span>
</center>
<!--Прокрутка картинок в карусели
//Сюда же ставим ссылки на картинки и ссылки на сайты-->
<script type="text/javascript">
var arr= [
'<a href="http://teremshow.0pk.ru/" target=_blank title="альтернативный текст"><img src="http://s3.uploads.ru/LKBWv.jpg" class="expando" border="0" width= "65" height= "80"></a>',
'<a href="http://teremshow.0pk.ru/" target=_blank title="альтернативный текст"><img src="http://s3.uploads.ru/8kUoT.jpg" class="expando" border="0" width= "65" height= "80"></a>',
'<a href="http://teremshow.0pk.ru/" target=_blank title="альтернативный текст"><img src="http://s2.uploads.ru/bZ34Y.jpg" class="expando" border="0" width= "65" height= "80"></a>',
'<a href="http://teremshow.0pk.ru/" target=_blank title="альтернативный текст"><img src="http://s2.uploads.ru/OtJr4.jpg" class="expando" border="0" width= "65" height= "80"></a>',
'<a href="http://teremshow.0pk.ru/" target=_blank title="альтернативный текст"><img src="http://s3.uploads.ru/NkrDQ.png" class="expando" border="0" width= "65" height= "80"></a>',
'<a href="http://teremshow.0pk.ru/" target=_blank title="альтернативный текст"><img src="http://s3.uploads.ru/PXhLA.jpg" class="expando" border="0" width= "65" height= "80"></a>',
'<a href="http://teremshow.0pk.ru/" target=_blank title="альтернативный текст"><img src="http://s3.uploads.ru/twS1l.jpg" class="expando" border="0" width= "65" height= "80"></a>',
'<a href="http://teremshow.0pk.ru/" target=_blank title="альтернативный текст"><img src="http://s2.uploads.ru/PYwEb.jpg" class="expando" border="0" width= "65" height= "80"></a>',
'<a href="http://teremshow.0pk.ru/" target=_blank title="альтернативный текст"><img src="http://s2.uploads.ru/tzj0v.jpg" class="expando" border="0" width= "65" height= "80"></a>',
'<a href="http://teremshow.0pk.ru/" target=_blank title="альтернативный текст"><img src="http://s3.uploads.ru/V871Z.jpg" class="expando" border="0" width= "65" height= "80"></a>',]
circularList={name:arr[0]};
circularList.next=circularList;
circularList.prev=circularList;
for(var i=1;i<arr.length;i++){
circularList ={name:arr[i],prev:circularList,next:circularList.next};
circularList.next.prev=circularList ;
circularList.prev.next=circularList ;
}
// количество видимых элементов в карусели
var citycount = 2;
var it = 0;
function print(){
var point=circularList;
for(var i =0;i<citycount ;i++){
document.getElementById("id"+i).innerHTML = point.name + " ";
point=point.next;
}
}
function dec(){
circularList=circularList.prev;
timeoutdec=setTimeout(dec , 500)
print();
}
function dec1(){
clearTimeout(timeoutdec)
}
function inc(){
circularList=circularList.next;
timeoutinc=setTimeout(inc , 500)
print();
}
function inc1(){
clearTimeout(timeoutinc)
}
print();
</script>
Ещё вопросик,..не могли бы вы выложить скрипт с вертикальной прокруткой? Там была сностка на вертикалку, но я сам не смогу сделать (переделать),..помогите...
Ссылка на мой форум здесь
Отредактировано maxshow (Чт, 4 Апр 2013 16:48:05)