В JS я вообще полный "0"
Может есть готовые решения? Сайт у меня на php, выводит последние новости на главной. Хочу сделать такую же штуку, чтобы выводились фото с заголовком и кратким текстом.
Спустя 3 часа, 52 минуты, 22 секунды (4.10.2008 - 15:45) zona7o написал(а):
На днях сам делал нечто такое. Привожу код, однако он при нажатии на кнопку работает. чтобы крутилось надо изменить кое-что. в конце напишу что.
HTML
JS
CSS
Так как нам надо, чтобы действие производилось не по onmousedown, нужно на onload добавить moveIt: onload="Loading();moveIt('list',left);".
однако как там реализована бесконечная прокрутка - не знаю, хотя есть версия, что можно поставить две таблицы подряд и проверять позиции.. ну думаю, здесь кто-нибудь ещё подскажет.
HTML
Код
<div id="inner">
<div id="window_l">
<div id="left" onmousedown="moveIt('list','left');" onmouseup="stopIt();" class="active">Влево</div>
</div>
<div id="window_r">
<div id="right" onmousedown="moveIt('list','right');" onmouseup="stopIt();" class="noactive">Вправо</div>
</div>
<div id="list">
<table summary="x" id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>
</div>
</div>
<div id="window_l">
<div id="left" onmousedown="moveIt('list','left');" onmouseup="stopIt();" class="active">Влево</div>
</div>
<div id="window_r">
<div id="right" onmousedown="moveIt('list','right');" onmouseup="stopIt();" class="noactive">Вправо</div>
</div>
<div id="list">
<table summary="x" id="table">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
</table>
</div>
</div>
JS
Код
var left;
var tO=false;
function Loading()
{
left=document.getElementById('window_l').clientWidth;
document.getElementById('list').style.left=left+"px";
}
function moveIt(id,moveTo)
{
tO=setInterval(function(){
scroll(id,moveTo);
},1);
}
function stopIt(){clearInterval(tO);}
function scroll(id,moveTo){
elementRef=document.getElementById(id);
width=document.getElementById("table").clientWidth;
opened=document.body.clientWidth-document.getElementById('window_l').clientWidth-document.getElementById('window_r').clientWidth;
if (moveTo=='right')
{
document.getElementById('left').className='active';
if (document.getElementById('window_l').clientWidth<=left)
document.getElementById('right').className='noactive';
else
left+=1;
}
else
{
document.getElementById('right').className='active';
if (left-document.getElementById('window_l').clientWidth-opened<=width*(-1))
document.getElementById('left').className='noactive';
else
left-=1;
}
elementRef.style.left=left+"px";
}
var tO=false;
function Loading()
{
left=document.getElementById('window_l').clientWidth;
document.getElementById('list').style.left=left+"px";
}
function moveIt(id,moveTo)
{
tO=setInterval(function(){
scroll(id,moveTo);
},1);
}
function stopIt(){clearInterval(tO);}
function scroll(id,moveTo){
elementRef=document.getElementById(id);
width=document.getElementById("table").clientWidth;
opened=document.body.clientWidth-document.getElementById('window_l').clientWidth-document.getElementById('window_r').clientWidth;
if (moveTo=='right')
{
document.getElementById('left').className='active';
if (document.getElementById('window_l').clientWidth<=left)
document.getElementById('right').className='noactive';
else
left+=1;
}
else
{
document.getElementById('right').className='active';
if (left-document.getElementById('window_l').clientWidth-opened<=width*(-1))
document.getElementById('left').className='noactive';
else
left-=1;
}
elementRef.style.left=left+"px";
}
CSS
Код
#inner{
margin:20px 0 0;
font:normal 18px Arial;
position:relative;
overflow:hidden;
width:100%;
height:112px;
}
#window_l{
position:absolute;
left:0;
top:0;
width:200px;
height:112px;
background:#f00;
overflow:hidden;
z-index:1;
}
#window_r{
position:absolute;
right:0;
top:0;
width:40%;
height:112px;
background:#f00;
overflow:hidden;
z-index:1;
}
#list{
height:112px;
position:absolute;
left:0;
top:0;
z-index:0;
background:#27763a;
}
#table{
margin:20px 0;
padding:5px 0;
height:66px;
background:#000;
overflow:hidden;
}
#list td{
text-align:center;
padding:20px 30px;
border:1px solid #ccc;
background:#fff;
color:#000;
overflow:hidden;
font:bold 12px/12px Verdana;
}
#left{
position:absolute;
top:45px;
right:10px;
}
#right{
position:absolute;
top:45px;
left:10px;
}
.active{
cursor:pointer;
color:#fff;
}
.noactive{
cursor:default;
color:#ccc;
}
margin:20px 0 0;
font:normal 18px Arial;
position:relative;
overflow:hidden;
width:100%;
height:112px;
}
#window_l{
position:absolute;
left:0;
top:0;
width:200px;
height:112px;
background:#f00;
overflow:hidden;
z-index:1;
}
#window_r{
position:absolute;
right:0;
top:0;
width:40%;
height:112px;
background:#f00;
overflow:hidden;
z-index:1;
}
#list{
height:112px;
position:absolute;
left:0;
top:0;
z-index:0;
background:#27763a;
}
#table{
margin:20px 0;
padding:5px 0;
height:66px;
background:#000;
overflow:hidden;
}
#list td{
text-align:center;
padding:20px 30px;
border:1px solid #ccc;
background:#fff;
color:#000;
overflow:hidden;
font:bold 12px/12px Verdana;
}
#left{
position:absolute;
top:45px;
right:10px;
}
#right{
position:absolute;
top:45px;
left:10px;
}
.active{
cursor:pointer;
color:#fff;
}
.noactive{
cursor:default;
color:#ccc;
}
Так как нам надо, чтобы действие производилось не по onmousedown, нужно на onload добавить moveIt: onload="Loading();moveIt('list',left);".
однако как там реализована бесконечная прокрутка - не знаю, хотя есть версия, что можно поставить две таблицы подряд и проверять позиции.. ну думаю, здесь кто-нибудь ещё подскажет.
Спустя 5 месяцев, 17 дней, 20 часов, 16 минут, 49 секунд (22.03.2009 - 13:02) volnet35 написал(а):
zona7o , у меня проблемы возникли со стилем. Управление (вправо, влево) отображаются вверху страницы. Но это ладно... поправимо.
Но вот как быть с самими ссылками? у меня выдает ошибку в браузере и они сами по себе не работают... Я запихнул этот код в php и все ковычки и апострофы экранировал слешем, а сам js файл прикрепил ссылкой.
Но вот как быть с самими ссылками? у меня выдает ошибку в браузере и они сами по себе не работают... Я запихнул этот код в php и все ковычки и апострофы экранировал слешем, а сам js файл прикрепил ссылкой.
| HTML |
| <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> <td>7</td> <td>8</td> <td>9</td> |
это я сделал как цикл while <td>$img</td>. В общем, это все выводится, но не работает перемотка.
Очень буду благодарен, т.к. больше никто, видимо не разбирается в этом
Очень буду благодарен, т.к. больше никто, видимо не разбирается в этом
Спустя 15 дней, 8 часов, 2 минуты, 45 секунд (7.04.2009 - 20:05) volnet35 написал(а):
Неужели больше никто не понимает в JS?