Слайдер HTML-контента для сайта: кликаем по ссылке - преходим на нужный слайд
Слайдер полноценно работает в IE, делает непрерывный скроллинг в Мозилле (останавливаясь при наведении мышки) и пока не работает в Опере и Сафари (но этими браузерами пользуется очень мало людей).
Текст скрипта, который нужно вставить в тело странички между тегами <body></body> и его (надеюсь доходчивое) описание
<script language="JavaScript"
type="text/JavaScript">
function ss(a){scroller.scrollAmount=a} //Это для мозиллы - при наведении на слайд он останавливается
</script>
<script language="JavaScript">
var stpdelay=20; //временной интервал между двумя соседними шагами
var steps=11; //количество шагов в процессе перемещения от одного слайда к другому
/*Функция ниже организовывает пошаговое перемещние контента от одного слайда к другому.
У нас контент - это табличка с одинаковыми колонками по 400 пикселей каждая.
Агрумент endpos - это конечная позиция слайдера (куда его нужно перевести).
*/
function slide(endpos){
var nowpos=scroller.scrollLeft; //запоминаем исходную позицию слайдера
var stpvalue=Math.floor((endpos-nowpos)/steps); //вычисляем величину шага
var endstp=(endpos-nowpos)%steps; //ширина ячейки (слайда) не обязательно кратна величине шага, поэтому нужен еще шаг для остатка
var i=0; //счетчик шагов
t1=window.setInterval(gostp,stpdelay); //с интервалом stpdelay запускаем функцию 1-го шага
/*Следующая функция шага gostp() - передвигает слайдер на величину шага stpvalue влево,
увеличиваем на 1 счетчик шагов и проверяем не достиг ли он необходимого
числа шагов steps для перемещения на нужный слайд. Если достиг, то удаляем
интервальный запуск шагателя gostp(), обнуляем счетчик шагов для последующего
использования и делаем последний шаг(в случае, если ширина слайда не кратна шагу)
*/
function gostp(){scroller.scrollLeft=scroller.scrollLeft+stpvalue;i++;
if(i>=steps){clearInerval(t1);i=0;scroller.scrollLeft=scroller.scrollLeft+endstp}
}
}
</script>
Тег marquee (внутри него наша табличка со слайдами, состоящая из 1-го рядка и 3-х колонок - 3 слайда):
<marquee id="scroller"
behavior="slide" scrollamount="20" direction="left"
width="400" onmouseover="ss(0)" onmouseout="ss(20)"
height="500"
style="border: 1px solid black; background-color: white;"><br
style="color: rgb(129, 11, 223);">
Заголовок таблицы со слайдами:
<table
style="text-align: left; width: 1200px; height: 400px;"
border="0" cellpadding="0" cellspacing="0">
Внутри кажой ячейки таблицы нельзя сразу вставлять код слайдов, т.к. ширина ячеек таблицы будет менятья пропорционально содержимому, а не будет оставаться заданой нами величиной, чтобы этого избежать внутри каждой ячейки находится еще таблица (border="0" cellpadding="0" cellspacing="0") с шириной 400px и всего одной ячейкой - это для фиксации ширины слайда.
После таблицы со слайдами обязательно вставьте скрипт:
<script language="JavaScript"
type="text/JavaScript">
scroller.stop();scroller.scrollLeft=400 </script>
- этот скрипт останавливает скроллер (в IE) после загрузки страницы (т.к. по умолчанию он движется).