| |
|
|
| | Здравствуйте Уважаемое сообщество, ни подскажете как создать на Java Script такой динамический эффект (горизонтальная прокрутка изображений при нажатии на кнопку). Есть страница сайта http://www.my-page28.narod.ru.
C правой стороны под спецпредложением есть 4 рисунка, слева и справа от рисунков стрелки влево и вправо, Как сделать чтоб при нажатии на стрелку влево или вправо происходила прокрутка рисунков, | |
| |
|
|
| |
|
|
| |
для: pautina
(15.01.2009 в 14:44)
| | | трудно в коде посмотреть? скачайте себе jquery и наслаждайтесь. библиотека общая.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Документ без названия</title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/mousewheel.js" type="text/javascript"></script> <script src="js/scrollable.js" type="text/javascript"></script> <style type="text/css">
/* Стили для прокрутки изобрадений */
#scrollable {
BORDER-RIGHT: #ddd 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #ddd 1px solid; PADDING-LEFT: 8px; PADDING-BOTTOM: 10px; BORDER-LEFT: #ddd 1px solid; WIDTH: 600px; PADDING-TOP: 10px; BORDER-BOTTOM: #ddd 1px solid; HEIGHT: 140px;
}
DIV.items {
FLOAT: left; MARGIN-LEFT: 8px; WIDTH:540px! important; HEIGHT: 140px;
}
#text { font-size:10pt; color:#494949; font-family:Tahoma; }
DIV.items A {
DISPLAY: block; FLOAT: left; WIDTH: 122px; CURSOR: pointer; COLOR: #ccc; MARGIN-RIGHT: 12px; HEIGHT: 140px; TEXT-ALIGN: center; TEXT-DECORATION: none; font-size:10pt; color:#494949; font-family:Tahoma;
}
DIV.items A:hover {
}
DIV.items A.active {
BACKGROUND-POSITION: -174px 0px; CURSOR: default; COLOR: #555
}
A.prev { background-image:
url(image/tab_cen_right_tab3_str_vlev.gif); background-repeat:no-repeat; width:24px; height:38px; DISPLAY: block; FLOAT: left; margin-top:10px
}
A.next { background-image:url(image/tab_cen_right_tab3_str_vpra.gif); background-repeat:no-repeat; width:24px; height:38px; DISPLAY: block; FLOAT: left; margin-top:10px
}
DIV.navi {
LEFT: 310px; MARGIN-LEFT: -50px; WIDTH: 50px; POSITION: relative; TOP: -30px; HEIGHT: 0px
}
DIV.navi SPAN {
BACKGROUND: url(dots.png) no-repeat 0px 0px; FLOAT: left; MARGIN: 3px; WIDTH: 8px; CURSOR: pointer; HEIGHT: 8px
}
DIV.navi SPAN:hover {
BACKGROUND-POSITION: 0px -8px
}
DIV.navi SPAN.active {
BACKGROUND-POSITION: 0px -16px
}
/* Конец стилей для прокрутки изобрадений */
</style></head> <body> <DIV id="scrollable"><A class=prev></A><DIV class=items> <A><img src="image/tab_cen_right_tab3_pic1-1.jpg" width="122" height="71" alt="Вязальные автоматы"> <b>AURORA-7C-12-1</b><br>Б/У перчаточные вязальные автоматы </A> <A><img src="image/tab_cen_right_tab3_pic1-2.jpg" width="122" height="71" alt="Бизнес план"> <b>Бизнес план</b><br>Для получения расчета необходимо... </A> <A><img src="image/tab_cen_right_tab3_pic1-3.jpg" width="122" height="71" alt="Доставка"> <b>Доставка</b><br>Предлагаем оформить бесплатную ... </A> <A><img src="image/tab_cen_right_tab3_pic1-4.jpg" width="122" height="71" alt="Фирменный логотип"> <b>Логотип фирменный</b><br>на рабочие х/б перчатки. </A> <A>5</A> <A>6</A> <A>7</A> <A>8</A> <A>9</A> <A>10</A> <A>11</A> <A>12</A> <A>13</A> <A>14</A> <A>15</A> </DIV><A class=next></A></DIV><SCRIPT type=text/javascript> $(function() { $("#scrollable").scrollable({horizontal:true}); });</SCRIPT></body></html>
|
| |
| |
|
|
