Как сделать анимацию на сайте?

@vanyakilkil · Регистрация: 13.06.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте друзья. Флеш вообще не знаю. Сейчас столкнулся с тем, что нужно сделать на сайте фотографии которые будут сменяться например через каждые пару секунд. Можете подсказать как осуществить?

@sleshiy · 28.05.2013, 10:19

Флеш для такой задачи не панацея. Подберите подходящий слайдер на просторах нета. В аннотациях, как правило, получите и инструкции по установке.

@vanyakilkil · 28.05.2013, 10:52 **[ТС]**

Сообщение от sleshiy

Флеш для такой задачи не панацея. Подберите подходящий слайдер на просторах нета. В аннотациях, как правило, получите и инструкции по установке.

Можете что-то посоветовать? Я просто понятия не имею как это делается, только что столкнулся. А вообще оно же с помощью флеш делается?

@sleshiy · 28.05.2013, 11:13

Навскидку:
30 слайдеров контента на jQuery
Топ 20 популярных бесплатных слайдеров и ротаторов картинок
все для сайта
Простой слайдер картинок TinySlider 2
Слайдеры для сайтов: виды и способы установки
wow slider

@vanyakilkil · 28.05.2013, 11:14 **[ТС]**

sleshiy, а вообще, самому такое можно писать?

@sleshiy · 28.05.2013, 11:15

Если хватает знаний, почему бы нет.

@vanyakilkil · 28.05.2013, 11:16 **[ТС]**

sleshiy, обычно просто не люблю программы, но сейчас скорее воспользуюсь, так как надо. Ну а вообще, нужно для этого jQuery или что?

@sleshiy · 28.05.2013, 11:20

Посмотрите по ссылкам, думаю получите ответы на многие вопросы.

@vanyakilkil · 28.05.2013, 12:42 **[ТС]**

sleshiy, Прошу прощения, а как например в этом слайдере сделать чтобы картинки не сверху вниз были? Пробовал в стилях копашиться - не помогает. Вот сам код. В стилях менял только в той странице где слайдер. Слайдер должен вмещаться в блок.

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
margin: 0px;
min-width: 1024px;
max-width: 1900px;
background-color: #354371;
}
 
#osn {
border: 1px solid red;
width: 850px;
height: 730px;
margin: 0 auto;
}
 
#shapka {
border: 1px solid red;
width: 100%;
height: 215px;
margin: 0;
}
 
#foto  {
border: 2px solid black;
width: 100%;
height: 280px;
margin: 0;
}
 
 
 
 
#kk {
border: 1px solid green;
width: 100%;
height: 228px;
margin: 0;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
<head>
<title>Обучение CSS</title>
<link rel="stylesheet" type="text/css" href="css.css">
<style type="text/css">
#slider ul li{
list-style: none;
}
#slider ul {
display: inline-block;
}
</style>
<script type="text/javascript">
var slideshow=new TINY.slider.slide('slideshow',{
    id:'slider',
    auto:4,
    resume:false,
    vertical:false,
    navid:'pagination',
    activeclass:'current',
    position:0,
    rewind:false,
    elastic:true,
    left:'slideleft',
    right:'slideright'
});
</script>
</head>
<body>
 
 
<div id="osn">
<div id="shapka">
</div>
<div id="foto">
<script type="text/javascript" src="script.js"></script>
<div id="wrapper">
    <div id="container">
        <div class="sliderbutton" id="slideleft" onclick="slideshow.move(-1)"></div>
        <div id="slider">
            <ul>
                <li><img src="photos/1.jpg" width="558" height="235" alt="Image One" /></li>
                <li><img src="photos/2.jpg" width="558" height="235" alt="Image Two" /></li>
                <li><img src="photos/3.jpg" width="558" height="235" alt="Image Three" /></li>
                <li><img src="photos/4.jpg" width="558" height="235" alt="Image Four" /></li>
            </ul>
        </div>
        <div class="sliderbutton" id="slideright" onclick="slideshow.move(1)"></div>
        <ul id="pagination" class="pagination">
            <li onclick="slideshow.pos(0)"></li>
            <li onclick="slideshow.pos(1)"></li>
            <li onclick="slideshow.pos(2)"></li>
            <li onclick="slideshow.pos(3)"></li>
        </ul>
    </div>
</div>
 
</div>
<div id="kk">
</div>
 
 
 
 
</div>
 
 
 
 
 </body>
 </html>

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650

	Как сделать анимацию на сайте? 28.05.2013, 01:44. Показов 1438. Ответов 8 Метки нет (Все метки) Здравствуйте друзья. Флеш вообще не знаю. Сейчас столкнулся с тем, что нужно сделать на сайте фотографии которые будут сменяться например через каждые пару секунд. Можете подсказать как осуществить? 0

@sleshiy 237 / 214 / 43 Регистрация: 12.12.2011 Сообщений: 917
	28.05.2013, 10:19
	Флеш для такой задачи не панацея. Подберите подходящий слайдер на просторах нета. В аннотациях, как правило, получите и инструкции по установке. 0

@sleshiy 237 / 214 / 43 Регистрация: 12.12.2011 Сообщений: 917
	28.05.2013, 11:13
	Навскидку: 30 слайдеров контента на jQuery Топ 20 популярных бесплатных слайдеров и ротаторов картинок все для сайта Простой слайдер картинок TinySlider 2 Слайдеры для сайтов: виды и способы установки wow slider 1

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	28.05.2013, 11:14 [ТС]
	sleshiy, а вообще, самому такое можно писать? 0

@sleshiy 237 / 214 / 43 Регистрация: 12.12.2011 Сообщений: 917
	28.05.2013, 11:15
	Если хватает знаний, почему бы нет. 0

@vanyakilkil 38 / 38 / 2 Регистрация: 13.06.2012 Сообщений: 650
	28.05.2013, 11:16 [ТС]
	sleshiy, обычно просто не люблю программы, но сейчас скорее воспользуюсь, так как надо. Ну а вообще, нужно для этого jQuery или что? 0

@sleshiy 237 / 214 / 43 Регистрация: 12.12.2011 Сообщений: 917
	28.05.2013, 11:20
	Посмотрите по ссылкам, думаю получите ответы на многие вопросы. 1